javascript實現簡單多文件上傳

該上傳功能主要用到html5新屬性FormData,通過XMLHttpRequest對象send到服務器，支持文件多選和多次選擇、文件去重、移除已選文件等

 

1、html代碼

      <div class="formtitle upLoad">附件上傳</div>
        <div class="chooseFile" style="height: auto;">
            <input type="button" id="uploadbtn" value="選擇文件..." /><input type="button" id="uploadfile" style="display: none;" value="上傳文件" />
            <input type="file" id="uploadpicker" accept="" style="display: none;" multiple />
            <div>
                <ul id="checkfileList"></ul>
            </div>
       </div>

　　

2、javascript 代碼

    var selectedFileList = [];//已選文件列表
    var paramTaskId = "";//請求參數
    var succsessCount = 0;//上傳成功文件個數
    var errorCount = 0;//上傳失敗文件個數
    $(function () {
        $("#uploadbtn").bind("click", function (e) {
            $("#uploadpicker").click();
        });
        $("#uploadpicker").bind("change", function () {//綁定文件選擇事件
            var files = $("#uploadpicker").prop("files");
            $.each(files, function (index, item) {
                var choiseFile = $("#checkfileList>li");
                if (choiseFile.length > 0) {//文件去重
                    var count = 0;
                    $.each(choiseFile, function (index1, item1) {
                        if (item.name == item1.innerText) {
                            count++;
                        }
                    });
                    if (count == 0) {
                        if (checkFileLength(item.size)) {
                            $("#checkfileList").append("<li class=\"fileinfo\">" + item.name + "<a style=\"display: none; color: red; margin-left: 10px;\" href=\"javascript:void(0)\" onclick=\"RemoveFile(this)\">刪除</a>" + "</li>");
                            selectedFileList.push(item);
                            AddMoushover();
                        }
                    }
                } else {
                    if (checkFileLength(item.size)) {
                        $("#checkfileList").append("<li class=\"fileinfo\">" + item.name + "<a style=\"display: none; color: red; margin-left: 10px;\" href=\"javascript:void(0)\" onclick=\"RemoveFile(this)\">刪除</a>" + "</li>");
                        selectedFileList.push(item);
                        AddMoushover();
                    }
                }
            });
        });
        AddMoushover();
    });
    //判斷文件是否超過限制大小
    function checkFileLength(fileLen) {
        if (fileLen > 4194304) {
            $.messager.alert("提示", "上傳文件大小不能超過4M","error");
            return false;
        }
        return true;
    }
     //上傳文件
    function uploadFile() {
        if (selectedFileList.length>0) {
        $.messager.progress({
            title: "提示",
            msg: "文件上傳中..."
        });
        $.each(selectedFileList, function (index, item) {
            debugger;
            var dataform = new FormData();
            dataform.append("file", item);
            var xmlhttp = null;
            if (window.XMLHttpRequest) {// code for all new browsers
                xmlhttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {// code for IE5 and IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp != null) {
                xmlhttp.open("POST", "/Project/ProjectTask/SaveFiles?TaskId=" + paramTaskId, true);
                xmlhttp.send(dataform);
                xmlhttp.onreadystatechange = callbackMethods;
            } else {
                alert("你的瀏覽器版本不兼容，請使用更高版本的瀏覽器");
            }
            //請求回調函數
            function callbackMethods() {
                debugger;
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        succsessCount++;
                        if ((succsessCount + errorCount) == selectedFileList.length) {
                            if (errorCount > 0) {
                                $.messager.alert("提示", "上傳文件完成," + errorCount + "個文件由於過大上傳失敗。", "error");
                            }
                            submitSuccess();
                        }
                    } else {
                        if (xmlhttp.status==500) {
                            errorCount++;
                            if ((succsessCount + errorCount) == selectedFileList.length) {
                                if (errorCount>0) {
                                    $.messager.alert("提示", "上傳文件完成,"+errorCount+"個文件由於過大上傳失敗。", "error");
                                }
                                submitSuccess();
                            }
                        }
                    }
                }
            }
        });

        } else {
            submitSuccess();
        }
    }
     //移除已選擇的文件
    function RemoveFile(obj) {
        $.messager.confirm("提示", "確認刪除當前文件?", function(e) {
            if (e) {
                var index = $("#checkfileList>li").index($(obj).parent());
                selectedFileList.splice(index, 1);
                $(obj).parent().remove();
            }
        });
    }
    //添加鼠標經過事件，鼠標划過時顯示“刪除”
    function AddMoushover() {
        $(".fileinfo").hover(function () {
            $(this).find("a").last().css("display", "");
        }, function () {
            $(this).find("a").last().css("display", "none");
        });
    }

　　3、圖片展示