建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:36收藏

简介


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