寫一個簡單的批量文件上傳插件


分享一個自己寫的簡單的批量文件上傳插件,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>

 

效果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM