写一个简单的批量文件上传插件
分享一个自己写的简单的批量文件上传插件,git地址:https://git.coding.net/lichmama/easyUpload.git
基于jQuery
关于兼容性:支持目前市场上绝大多数的浏览器,IE的话最好选择IE10以上。
该插件很简单,由三个文件组成:easyUpload.js,easyUpload.css,以及loading.gif
--代码请从git获取
参数说明:
maxSize: 单个文件允许上传的最大尺寸
multiple: 是否允许一次选取多个文件
maxFiles:设置当前组件能处理的最大文件数
accept:支持选取的文件格式(后缀)
process:文件处理函数,可以根据实际应用编写自己的逻辑
下面给出一个样例,使用起来也很简单:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>easyUpload - 批量文件上传</title> <link rel="stylesheet" href="easyUpload/easyUpload.css"> <script type="application/javascript" src="jquery/jquery.min.js"></script> <script type="application/javascript" src="easyUpload/easyUpload.js"></script> <script type="application/javascript"> $(function () { $('#fileUpload').easyUpload({ maxSize: 10485760, // 单个文件最大尺寸10MB multiple: true, // 支持选择多个文件 maxFiles: 5, // 插件最多处理5个文件 accept: '.doc,.docx,.xls,.xlsx', // 仅上传word或excel文件 process: function (file) { var returnValue = true; var formData = new FormData(); formData.append("file", file); $.ajax({ url: '/upload', type: 'post', processData: false, contentType: false, data: formData, success: function (result) { // do some business logic... }, error: function () { returnValue = false; } }) return returnValue; } }); }); </script> </head> <body> <div id="fileUpload"></div> </body> </html>
效果如下: