写一个简单的批量文件上传插件

分享一个自己写的简单的批量文件上传插件,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>

 

效果如下:

 

posted @ 2018-12-15 20:34  lichmama  阅读(1549)  评论(6编辑  收藏  举报