拖拽上传图片,可以多张同时上传

拖拽上传图片,可以多张同时上传
在HTML5中，使用DataTransfer对象中提供的方法，可以实现浏览器与其他应用程序之间文件的拖动。

html部分：

<div class="content">
  <form>
    <div class="drag" ondrop = "dropFile(event)" ondragenter = "return false" ondragover = "return false">
      <span class="spn-img" id="spn-img"></span>
    </div>
  </form>
</div>

css部分：

* {margin: 0; padding: 0;}
.content {margin:50px auto; width: 600px; border: 1px solid #ccc; padding: 20px;}
.content .drag {width: 596px; min-height: 300px; background: url(bg.png) no-repeat center center; border: 2px dashed #666;}
.spn-img img {max-width: 596px;}

js部分

var fileUploadPreview = function (aFile) {
  if (typeof FileReader == "undefined") {
    alert("浏览器不支持");
  }
  var i;
  for (i = 0; i < aFile.length; i++) {
    var tmp = aFile[i];
    var reader = new FileReader();
    reader.readAsDataURL(tmp);
    reader.onload = (function (f) {
      return function (e) {
        document.getElementById("spn-img").innerHTML += "<img src=\""+e.target.result+"\" title=\""+f.name+"\">";
      }
    })(tmp)
  }
};
var dropFile = function (e) {
  fileUploadPreview(e.dataTransfer.files);
  e.stopPropagation();
  e.preventDefault();
};

演示地址：http://web.csroad.cn/2025/1208/