HTML5拖拽上传图片

使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器。

三个相关事件：
dragenter
dragover
drop
原生JavaScript：

<div id="drop_zone">Drop files here</div>
<ul id="list"></ul>


// 必须阻止dragenter和dragover事件的默认行为，这样才能触发 drop 事件
function fileSelect(evt) {

  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files; // 文件对象
  var output = [];

  // 处理多文件
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate.toLocaleDateString(), '</li>');
  }
  // 显示文件信息
  document.getElementById('list').innerHTML = output.join('');
}

function dragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', dragOver, false);
dropZone.addEventListener('drop', fileSelect, false);
jQuery：

其他代码可以不变，注意监听事件的时候的，由于jQuery的封装，数据存放的字段有变，传参是 e.originalEvent 而不是 e ：

$("#drop_zone").on('dragover', function(e){
e.stopPropagation();
e.preventDefault();
handleDragOver(e.originalEvent);
});

$("#drop_zone").on('drop', function(e){
e.stopPropagation();
e.preventDefault();
handleFileSelect(e.originalEvent);
});