JQuery在HTML5多附件或多图上传插件multiupload

简介

multiupload是一款在HTML5多附件或多图上传插件multiupload，multiupload.js 就是用 html5的 <input type='file' multiple='true'/>这一属性结合jquery的一些功能来实现这一功能！

插件特定：

1、它可以进行多图上传；

2、它可以显示上传图片的各文件的文件名称；

3、它可以拖拉上传。

使用

1.  引入 jquery.js 和 multiupload.js 文件

2.  HTML

<center>
  <h1 class="title">Multiple Drag and Drop File Upload</h1>
</center>

<div id="dragAndDropFiles" class="uploadArea">
  <h1>Drop Images Here</h1>
</div>

<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
  <input type="file" name="multiUpload" id="multiUpload" multiple />
  <input type="submit" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload" />
</form>

<div class="progressBar">
  <div class="status"></div>
</div>

3.  调用

var config = {
  support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",
  form: "demoFiler",
  dragArea: "dragAndDropFiles",
  uploadUrl: "upload.php"
}

$(document).ready(function(){
  initMultiUploader(config);
});

相关链接

官方文档 ：  https://www.w3.org/TR/FileAPI/

Github 地址 ：https://github.com/arunkumarsekar/Multiple_file_drag_and_drop_upload