基於jquery的多檔案上傳

阿新 • • 發佈：2019-01-06

1、檔案上傳前臺設計

說到前臺設計，還真的有些不知道怎麼講好，還是老樣子，直接上圖來的直接，在此也說明下：本人不擅長做PS，所以很多素材（圖片）都是網上尋找的，這個上傳程式可以上傳各種檔案，至於哪些？我沒數過，我不介意你數一數，我就用簡單的圖片上傳來演示吧，附帶預覽功能。

還沒有上傳的時候的介面（有點醜，莫嫌棄）

要開始上傳時:

這個時候滑鼠上移的時候，可以對檔案進行操作（刪除掉誤選的照片和檢視檔名）

上傳時的圖片（由於本人是用js模擬上傳，所以上面的總的進度條不會動，完整的程式完全沒有問題）：

2、程式碼講解

前臺介面，我還是很簡單，就一個div，div中帶一個id,如下所示：

<div id="imgUpload"></div>

需要的外掛也只有一個jquery

<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>

怎麼執行呢？我全都封裝好了，就下面簡單的一句程式碼：

 $("#imgUpload").initUpload({
        "url":"servlet/ProgressUploadServlet",
        "selectBTText":"選擇圖片",
       // "fileType":"image/*",
        "size":"10"
    });

附帶說明一份：也是這個程式主要功能的表現吧

initUpload引數物件說明：
 
引數        是否必須      預設值                                                                作用
url           可選        預設“servlet/ProgressUploadServlet”                              上傳後臺服務介面
selectBTText  可選        選擇檔案                                                         選擇檔案上傳按鈕的資訊
fileType      可選        (所有檔案)參考：http://www.cnblogs.com/Joans/p/3158582.html        設定檔案上傳的格式
 
size          可選        不限定                                                             檔案（單個）大小，單位MB

至於CSS似乎沒什麼好講的，如果感興趣可以下載原始碼，什麼都有了，呵呵

至於js，重要的說明一下：

首先了解下選擇多個檔案：也很簡單，用html標籤就能實現了

<input type="file" id="input"  multiple="multiple">

當然我點選的是按鈕，稍微懂一點的就知道怎麼實現了，無非就是用js建立了個inpit模擬點選下。

/**
 *  zxm
 * 作用：點選按鈕可以彈出一個對話方塊，選擇檔案
 * @param uploadId 上傳檔案的id
 */
function selectFile(uploadId){
    var inputObj=document.createElement('input');
    inputObj.setAttribute('id',uploadId+'_file');
    inputObj.setAttribute('type','file');
    inputObj.setAttribute("style",'visibility:hidden');
    inputObj.setAttribute("multiple","multiple");
    inputObj.setAttribute("onchange","showFile(this.files,'"+uploadId+"')");//這句很重要，檔案選擇的時候就會觸發這個事件
    var opt=$("#"+uploadId).data("opt");
    if(opt.fileType){
        inputObj.setAttribute("accept",opt.fileType);
    }
    document.body.appendChild(inputObj);
    inputObj.click();
    $("#"+opt.uploadId).removeData("FileArray");
    var FileArray = new Array();
    $("#"+opt.uploadId).data("FileArray",FileArray);
}

選擇了檔案後做什麼，當然是顯示出來：如果是圖片就預覽，如果是其他格式的檔案就選擇相應的圖片顯示出來，程式碼如下：

/**
 * zxm
 * 作用：顯示縮圖
 * @param files 檔案列表
 * @param uploadId  檔案提交的功能id，也就是初始化的id
 */
function showFile(files,uploadId){
    var imgtest=/image\/(\w)*/;  //驗證圖片格式
    var audiotest = /audio\/(\w)*/; //驗證音樂
    var videotest =/video\/(\w)*/; //視訊驗證
    var pdftest = /application\/pdf/; //pdf驗證
    var ziptest = /application\/(zip|rar|7z|cab|iso)/; //壓縮驗證
    var opt=$("#"+uploadId).data("opt");

    if(window.FileReader){
        $("#"+uploadId+"_Context").html("");
        for(var i =0; i<files.length;i++) {
            var file = files[i];
           if(opt.size!=""){
                if(file.size>(opt.size)*1048576){
                    alert("檔案"+file.name+"，太大不提供上傳");
                    continue;
                }
           }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (function (f,i,uploadId) {
                var FileArray=$("#"+uploadId).data("FileArray");
                FileArray[FileArray.length]=i;
                $("#"+uploadId).data("FileArray",FileArray);
                return function(e){
                    var result = e.target.result;
                    var appendData = "";
                    if(imgtest.test(file.type))
                    {
                        appendData += "<div class='showItemDiv' id='" + uploadId + "_showItemDiv_" + i + "' style='background-image: url(" + result + ");' onmouseover=showItemTitleStatus('" + i + "','true','" + uploadId + "') onmouseout=showItemTitleStatus('" + i + "','false','" + uploadId + "')>";
                    }else if(audiotest.test(file.type)){
                        appendData += "<div class='showItemDiv' id='" + uploadId + "_showItemDiv_" + i + "' style='background-image: url(images/filetype/MUISIC.png);background-repeat: no-repeat;' onmouseover=showItemTitleStatus('" + i + "','true','" + uploadId + "') onmouseout=showItemTitleStatus('" + i + "','false','" + uploadId + "')>";
                    }else if(videotest.test(file.type)){
                        appendData += "<div class='showItemDiv' id='" + uploadId + "_showItemDiv_" + i + "' style='background-image: url(images/filetype/AVI.png);background-repeat: no-repeat;' onmouseover=showItemTitleStatus('" + i + "','true','" + uploadId + "') onmouseout=showItemTitleStatus('" + i + "','false','" + uploadId + "')>";
                    }else if(pdftest.test(file.type)){
                        appendData += "<div class='showItemDiv' id='" + uploadId + "_showItemDiv_" + i + "' style='background-image: url(images/filetype/PDF.png);background-repeat: no-repeat;' onmouseover=showItemTitleStatus('" + i + "','true','" + uploadId + "') onmouseout=showItemTitleStatus('" + i + "','false','" + uploadId + "')>";
                    }else if(ziptest.test(file.type)){
                        appendData += "<div class='showItemDiv' id='" + uploadId + "_showItemDiv_" + i + "' style='background-image: url(images/filetype/ZIP.png);background-repeat: no-repeat;' onmouseover=showItemTitleStatus('" + i + "','true','" + uploadId + "') onmouseout=showItemTitleStatus('" + i + "','false','" + uploadId + "')>";
                    }else{
                        appendData += "<div class='showItemDiv' id='" + uploadId + "_showItemDiv_" + i + "' style='background-image: url(images/filetype/FILE.png);background-repeat: no-repeat;' onmouseover=showItemTitleStatus('" + i + "','true','" + uploadId + "') onmouseout=showItemTitleStatus('" + i + "','false','" + uploadId + "')>";
                    }
                    //下面是關於刪除和確認按鈕
                    appendData +="<div class='showItemStatus' id='"+uploadId+"_showItemStatus_"+i+"' >";
                    appendData +="<img src='images/x_alt.png' id='"+uploadId+"_showItemStatus_img_"+i+"' onclick=removeFile('"+i+"','"+uploadId+"')>";
                    appendData +="</div>";


                    //下面是關於檔名
                    appendData += "<div class='fileNameDiv'id='"+uploadId+"_showItem_file_name_"+i+"'>" + f.name + "</div>";

                    //這一條是進度條
                    appendData+="<div class='prograssbar' ><div class='prograssbar_inner' id='"+uploadId+"_showItem_prograssbar_"+i+"'></div></div>";
                    appendData += "</div>";
                    $("#" + uploadId + "_Context").append(appendData);

                }
            })(file,i,uploadId);
        }
        var contentDiv="<div class='uploadBTDiv' >";
        contentDiv+="<div class='prograssbarsummer'>";
        contentDiv+="<div class='prograssbar_inner prograssbarsummer_inner' ></div>";
        contentDiv+="<div class='prograssbar_number'></div>";
        contentDiv+="</div>";
        contentDiv+="<div class='prograssbarsummer_message'>";
        contentDiv+="<span class='prograssbar_size'></span><span class='prograssbar_useTime'></span><span class='prograssbar_needTime'></span><span class='prograssbar_velocity'></span>"
        contentDiv+="</div>";

        contentDiv+="<div>";
        contentDiv+="<button class='uploadBT' id='"+uploadId+"_uploadBt' onclick=uploadFile('"+uploadId+"')>上傳</button>";
        contentDiv+="<button id='"+uploadId+"_canceldBt' class='cancelBT' onclick=cancelFile('"+uploadId+"')>取消</button>";
        contentDiv+="<button id='"+uploadId+"_cleanBt' class='cleanBT' onclick=cleanFile('"+uploadId+"')>清空</button>" ;
        contentDiv+="</div>";
        contentDiv+="</div>";
        $("#"+uploadId+"_Context").append(contentDiv);
    }else{
        alert("您的瀏覽器不支援縮圖的顯示");
    }
}

這裡有一個稍微有趣的東西FileReader，我也稍微講解下：

它的作用很簡單，就一個“讀取檔案”，稍微專業點的話就是：FileReader物件讓Web應用程式的非同步讀取檔案內容（或原始資料緩衝區）儲存在使用者的計算機上，使用檔案或BLOB物件指定要讀取的檔案或資料。

FileReader有五種讀取的方法:

abort() 終端讀取
readAsBinaryString() 返回檔案內容的二進位制格式（不推薦使用）
readAsArrayBuffer() 返回檔案內容的 ArrayBuffer 格式(圖片檔案推薦使用)
readAsDataURL() 返回檔案內容的 data URL格式
readAsText() 返回檔案內容的純文字格式

同時這個FileReader還帶有一些事件，這些時間也簡單，為了方便理解，我也寫了一個小小的測的測試檔案，看下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js檔案操作教程</title>
</head>
<body>
<div id="filecontent"></div>
<h3>案例1:以text格式輸出</h3>
    選擇檔案<input type="file" onchange="showFilesAsText(this.files)"/>
<h3>案例2:以URL格式輸出</h3>
    選擇檔案<input type="file" onchange="showFilesAsDataURL(this.files)"/>
<h3>案例3:以二進位制格式輸出</h3>
    選擇檔案<input type="file" onchange="showFilesAsBinaryString(this.files)"/>
<!--說明：FileReader有5個方法：
            1、readAsText() – 返回檔案內容的純文字格式
            2、readAsBinaryString() –返回檔案內容的二進位制格式 (不推薦– 推薦使用 readAsArrayBuffer())
            3、readAsDataURL() – 返回檔案內容的 data URL格式
            4、abort 終端讀取

            **讀取的結果從 event.target.result 獲取。

            檔案讀取成功則執行 onload 方法否則執行 onerror 方法

            事件：
            1、onabort 中斷
            2、onerror 出錯
            3、onloadstart 開始
            4、onprogress 正在讀取
            5、onload 成功讀取
            6、onloadend 讀取結束，無論是否成功
 -->


</body>
</html>

<script type="text/javascript">
    function showFilesAsText(files){
        //如果檔案數量不為0
        if(files.length){
            var file = files[0];
            var reader = new FileReader();
            reader.onload = function(e){
                document.getElementById("filecontent").innerHTML = e.target.result;
            }
            reader.readAsText(file);
        }
    }

    function showFilesAsDataURL(files){
        if(files.length){
            var file = files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(e){
                document.getElementById("filecontent").innerHTML ="<img src='" +e.target.result+"'/>";
            }
        }
    }

    function showFilesAsBinaryString(files){
        if(files.length){
            var file = files[0];
            var reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload=function(e){
                document.getElementById("filecontent").innerHTML = e.target.result;
            }
        }
    }
</script>

還有個詳細的介紹，可以讀一讀：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

要顯示檔案上面好幾種方式都可以實現，為了方便起見用了readAsDataURL()這個方法。

然後瞭解下formData()

var formData = new FormData();

它其實也沒什麼神祕，它呢一個HTML <form>元素指定的表單時，物件將被填充形式的鍵/值。它還將編碼檔案輸入內容。注意：它還將編碼檔案輸入內容

如果想知道詳情，看看這個連結吧：https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

so 我就能用了這個玩意，裝了些我要上傳的檔案

至於上傳，我自然是選擇jquery上傳，看下面的程式碼：

$.ajax({
        type:"post",
        url:url,
        data:formData,
        processData : false,
        contentType : false,
        success:function(data){
            //alert(data);
        },
        error:function(e){
            //alert("檔案上傳失敗");
        }
    })

注意有兩個很重要的屬性

 processData : false,

contentType : false,

這兩個一定要寫，至於有什麼用，查一下jquery文件就知道了

好了，主要的東西也就這麼點，其它就是資料的獲取，以及效果的顯示問題了，如果感興趣可以看原始碼，如果有什麼好的想法或者建議，也可以和我交流

前臺js測試原始碼地址：http://pan.baidu.com/s/1eRGPoUe

後臺程式完整程式碼（java）：http://pan.baidu.com/s/1kVAjGaV

基於jquery的多檔案上傳

1、檔案上傳前臺設計

2、程式碼講解

jQuery.MultiFile 基於jQuery多檔案上傳外掛

jQuery 多檔案上傳

jquery多檔案上傳外掛 multifile的使用

jQuery多檔案上傳

基於jquery的多檔案上傳

基於ASP.NET MVC 4、WebApi、jQuery和FormData的多檔案上傳方法

基於jquery讀取input上傳的檔案內容

java 基於List實現多檔案上傳

Jquery外掛(uploadify外掛實現多檔案上傳）

支援多檔案上傳，預覽，拖拽的基於bootstrap的上傳外掛fileinput

jquery ajaxFileUpload.js外掛支援多檔案上傳的方法

支援多檔案上傳，預覽，拖拽，基於bootstrap的上傳外掛fileinput的ajax非同步上傳

多檔案上傳，基於springmvc(MultipartFile)

jQuery多圖上傳預覽

Spring MVC - MultipartFile實現檔案上傳(單檔案與多檔案上傳)

相容ie8的多檔案上傳

用Ajax提交多檔案上傳表單

SpringBoot多檔案上傳和檔案下載

第30講 .struts2多檔案上傳

TP5實現多檔案上傳及展示

基於jquery的多檔案上傳

1、檔案上傳前臺設計

2、程式碼講解

相關推薦