zoukankan      html  css  js  c++  java
  • 写一个简单的批量文件上传插件

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

    效果如下:

  • 相关阅读:
    Cookie和Session机制详解
    MySQL数据库MyISAM和InnoDB存储引擎的比较
    MySQL索引背后的数据结构及算法原理
    Qt Meta Object System-元对象系统
    Qt事件处理机制
    学习STL-介绍一下STL
    为什么你有10年经验,但成不了专家?
    关于union的那些事儿
    关于enum的那些事儿
    三子棋局-挑战你的逻辑思维
  • 原文地址:https://www.cnblogs.com/lichmama/p/10124582.html
Copyright © 2011-2022 走看看