Jquery+Aajax 批量上传

注:转载请标明文章原始出处及作者信息

　　网上有现成的Uploadify、WebUpload等插件，自己写一个简单的（非插件）.

　　1.页面

　　批量上传页面

　　

<form action="" id="formid">
    @Html.Hidden("filelist")
    <table>
        <tr>
            <td>
                文件：
            </td>
            <td>
                <div id="filediv" class="filediv"></div>
            </td>
        </tr>
        <tr>
            <td>
                文件:
            </td>
            <td>
                    <input type="file" id="file" name="wfile"  accept=".pdf" onchange="upload();" multiple="multiple" />
                    选择文件
              
                <span style="padding:5px;color:red;" id="scts">未选择文件</span>
            </td>
        </tr>
    </table>
</form>

　　美化上传按钮

　　

   <a href="javascript:" style="display:inline-block; 100px;padding:5px; background:#007dce; position:relative; overflow:hidden;color:white;text-align:center;border-radius:4px;">
                    <input style="cursor:pointer;position:absolute; right:0; top:0; font-size:100px; opacity:0;" type="file" id="file" name="wfile" accept=".pdf" onchange="upload();" multiple="multiple" />
                    选择文件
                </a>

　　文件列表

　　

.filediv {
    height: 100px;
    background-color: burlywood;
    overflow-x: hidden;
    overflow-y: auto;
}

　　2.脚本

　　选择文件

　　

function upload() {
    //获得已选文件集合
    var fs = document.getElementById("file").files;
    //元素数据
    var fsarray = $("#filelist").data("data");
    if (fsarray) {
        //添加新选择的文件
        $.each(fs, function (i, v) {
            if (fsarray.indexOf(v.name) == -1) {
                fsarray.push(v);
                $("#filediv").append("<div data-name='" + v.name + "' class='xdiv'>" + v.name + "<span onclick='delpdf(this)'>X</span></div>");
            }
        })
    }
    else {
        fsarray = new Array;
        $.each(fs, function (i, v) {
            fsarray.push(v);
            $("#filediv").append("<div data-name='" + v.name + "' class='xdiv'>" + v.name + "<span onclick='delpdf(this)'>X</span></div>");
        })
        //向元素附加已选择的数据
        $("#filelist").data("data", fsarray);
    }
    $("#scts").css("color", "green").text("已选择" + fsarray.length + "个文件");
}

　　删除文件

　　

function delpdf(obj) {
    var ar = $("#filelist").data("data");
    ar.splice(ar.indexOf("data-name"), 1);
    $(obj).parent().remove();
    $("#scts").css("color", ar.length == 0 ? "red" : "green").text("已选择" + ar.length + "个文件");
}

　　3.上传

　　

  if (!$("#formid").validate().form()) return false;
                var fd = new FormData($("#formid")[0]);
                if ($("#wfile").outerHTML) {
                    $("#wfile").outerHTML = $("#wfile").outerHTML;
                } else { 
                    $("#wfile").value = "";
                }
                for (var i = 0; i < $("#filelist").data("data").length; i++) {
                    fd.append("filelist[]", $("#filelist").data("data")[i])
                }
                $.ajax({
                    url: "/home/ManuscriptAdd",
                    type: "post",
                    dataType: "json",
                    data: fd,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.state == "200") {
                            $.jBox.tip("上传成功", "success");
                            window.location.reload();
                        }
                        else {
                            $.jBox.tip(data.content, "error");
                        }
                    },
                    error: function (xhr) {
                        $.jBox.closeTip();
                    }
                })