html5的文件api示例与jquery？

Posted 2023-05-08

【中文标题】html5的文件api示例与jquery？

【英文标题】：html5's file api example with jquery?

【发布时间】：2011-06-10 23:39:18

【问题描述】：

我想使用 html5 的文件 api，结合外部拖放功能（将外部文件拖到指定位置并捕获其内容）和 jquery。我找到了一个工作的非 jquery 示例：(html5 demo: file api)

 var drop = document.getElementById('drop');  
 drop.ondragover = function () this.className = 'focus'; return false;;  
 drop.ondragend = function ()  this.className = ''; return false; ;  
 drop.ondrop=function(e)   
          this.className = '';  
          e.preventDefault();  
          var file = e.dataTransfer.files[0];  
          var reader = new FileReader();  
          reader.onload = function (evt)   
                console.log(evt.target.result);  
            
          reader.readAsText(file);  
      ; 

这很好用。现在我想让它更像一个 jquery-ish，我尝试了：

 $("#drop").bind('ondragover',function() this.addClass('focus'); return false;)
.bind("ondragend",function ()  this.removeClass('focus'); return false;)  
.bind("ondrop",function(e)   
         this.removeClass("focus");  
         e.preventDefault();  
         var file = e.dataTransfer.files[0];  
         var reader = new FileReader();  
         reader.onload = function (evt)   
               console.log(evt.target.result);  
           
         reader.readAsText(file);  
     );   

但这不起作用，似乎没有任何绑定事件被触发。我还尝试松开事件名称的“开启”部分，但这也不起作用。 希望这里有人能发光吗？

问候， 杰罗恩。

【参考方案1】：

Gidon 的描述解决了这个问题。这是一个完整编码的示例，以防其他人正在寻求解决此问题并需要更多详细信息。

// Bindings to HTML; replace these with your components.
var $dropArea = $('#dropArea');
var $picsHolder = $('#picsHolder');

// Attach our drag and drop handlers.
$dropArea.bind(
  dragover: function() 
    $(this).addClass('hover');
    return false;
  ,
  dragend: function() 
    $(this).removeClass('hover');
    return false;
  ,
  drop: function(e) 
    e = e || window.event;
    e.preventDefault();

    // jQuery wraps the originalEvent, so we try to detect that here...
    e = e.originalEvent || e;
    // Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/).            
    var files = (e.files || e.dataTransfer.files);

    var $img = $('<img src="" class="uploadPic" title=""  />');
    for (var i = 0; i < files.length; i++) 
      (function(i) 
        // Loop through our files with a closure so each of our FileReader's are isolated.
        var reader = new FileReader();
        reader.onload = function(event) 
          var newImg = $img.clone().attr(
            src: event.target.result,
            title: (files[i].name),
            alt: (files[i].name)
          );

          // Resize large images...
          if (newImg.size() > 480) 
            newImg.width(480);
          

          $picsHolder.append(newImg);
        ;
        reader.readAsDataURL(files[i]);
      )(i);
    

    return false;
  
);

#dropArea 
  border: 10px dashed;
  border-radius: 10px;
  border-color: gray;
  width: 200px;
  height: 200px;

#dropArea:hover 
  border-color: black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picsHolder"></div>
<div id="dropArea"></div>

【讨论】：

必须在 chrome 中将 dragend 更改为 dragleave，然后在 drop 中复制 removeclass

@Benjamin，在我看到这个之前，我已经在桌子上敲了一会儿头——通常不需要为 Chrome 添加“修复”，但是哦。谢谢！

【参考方案2】：

解决方法很简单。

丢失 on 前缀（这就是没有引发事件的原因） this. => $(this).（这就是为什么当事件被抛出时什么也没发生，它给出了一个错误）。

对我有用。

【讨论】：

是的，这很愚蠢（$(this)）。无论如何，要使用 jquery，我还必须通过执行 e.originalEvent.dataTransfer 来解压缩原始事件。谢谢你的回答。