无刷新多文件上传

CSS
<style type="text/css">
        #fuplContainer
        {
            width: 400px;
            height: 500px;
            border: 1px solid #000;
        }
        #fuplContainerTitle
        {
            width: 113px;
            height: 30px;
            font-size: 30;
            color: #fff;
            background-color: #124587;
            text-align: center;
            vertical-align: middle;
        }
        #div_fuplButt, #div_Save
        {
            width: 200px;
            height: 50px;
            background-color: #154879;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            margin-top: 10px;
            text-align: center;
            font-size: 25px;
            color: #fff;
            font-family: "幼圆";
            vertical-align: middle;
            cursor: pointer;
        }
        .sub
        {
            background-color: steelblue;
            width: 98%;
            height: 50px;
            margin-top: 9px;
            margin-left: 1%;
            margin-right: 1%;
            font-size: 15px;
            color: #fff;
            display: none;
        }
        .loadOK
        {
            margin-left: 180px;
        }
        .X
        {
            color: Red;
            margin-left: 10px;
            text-decoration: none;
        }
        .rateStrip
        {
            width: 60%;
            height: 3px;
            background-color: #fff;
            float: left;
            margin-left: 20px;
            margin-top: 2%;
        }
        .rateStripIn
        {
            background-color: #154789;
            width: 1px;
            height: 100%;
            float: left;
        }
    </style>

HTML

<input type="file" id="fupl" name="fupl" style="display: none" />
    <div id="fuplContainer">
    </div>
    <div id="div_fuplButt">
        添加文件</div>
    <div id="div_Save">
        开始上传</div>

JS

;
var UpLoad = (function () {
    var _data = {
        fuplQuere: [],
        divQuere: [],
        fupl: undefined,
        AddButt: undefined,
        fuplContainer: undefined,
        UpButt: undefined,
        h: 0,
        arrHtml: []
    },
    _fun = {
        _initForm: function (data) {
            data.arrHtml.push('<iframe id="iframeLoad" name="upload" style="display: none">');
            data.arrHtml.push('</iframe>');
            data.arrHtml.push('<input type="file" id="fupl" name="fupl" style="display: none" />')
            data.arrHtml.push('<form id="load" enctype="multipart/form-data" method="post" action="UpLoad.ashx" target="upload" style="display: none;">');
            data.arrHtml.push('<input id="_submit" type="submit" />');
            data.arrHtml.push('<div id="div_count"></div>')
            data.arrHtml.push('</form>');
            $("body").append(data.arrHtml.join(''));
            data.arrHtml = [];
        },
        _upEnd: function (data) {
            $("#iframeLoad").load(function () {
                var iframe = $($("#iframeLoad").get(0).contentWindow.document);
                var pre = iframe.find("pre")
                if (pre.length > 0) {
                    var shift = data.divQuere.shift();
                    shift.stop();
                    shift.find(".rateStripIn").animate({
                        width: "100%"
                    }, 100, function () {
                        shift.find(".rate").html('<div class="loadOK">√ 上传完成</div>');
                        if (data.fuplQuere.length > 0) {
                            data.UpButt.click();
                        }
                    })
                }
            });
        },
        _fuplChange: function (data) {
            data.fupl.change(function () {
                var obj = $(this);
                var files = obj.get(0).files;
                var i = files.length;
                var divsub;
                var index;
                for (var j = 0; j < i; j++) {
                    var name = files[j].name;
                    if (name.length > 8) {
                        name = name.substring(0, 8) + "...";
                    }
                    divsub = $('<div class="sub"><div style="height:30%" ></div><div style="float:left;width:112px">' + name + '</div></div>');
                    data.fuplContainer.append(divsub);
                    index = data.divQuere.length;
                    divsub.append('<div class="rate"><div class="rateStrip"><div class="rateStripIn"></div></div><a href="javascript:void(0)" class="X" data-index=' + index + '>X</a>')
                    data.divQuere.push(divsub);
                    divsub.find(".X").click(function () {
                        $(this).closest(".sub").fadeOut(200, function () {
                            $(this).remove();
                        });
                        var i = $(this).attr("data-index");
                        data.divQuere.splice(i, 1);
                        data.fuplQuere.splice(i, 1);
                    })
                    divsub.fadeIn(500);
                    data.h += parseFloat(divsub.css("height"));
                }
                if (data.h >= 400) {
                    data.fuplContainer.stop();
                    data.fuplContainer.animate({
                        height: parseFloat(data.fuplContainer.css("height")) + parseFloat(divsub.css("height"))
                    }, 300)

                }
                data.fuplQuere.push(obj.clone(true));

            });
        },
        _UpButtClick: function (data) {
            data.UpButt.click(function () {
                if (data.fuplQuere.length > 0) {
                    var l = data.fuplQuere[0].prop("files").length;
                    data.divQuere[0].find(".rateStripIn").animate({
                        width: "85%"
                    }, 2000)
                    $("#div_count").html(data.fuplQuere.shift());
                    $("#_submit").click();
                }
                else {
                    alert("无可上传文件!")
                }
            })
        },
        _init: function (addButtKey, upButtKey, fuplContainer) {
            var data = _data;
            var fun = _fun;
            //添加上传文件按钮
            data.AddButt = $(addButtKey);
            //开始上传按钮
            data.UpButt = $(upButtKey);
            //上传列表显示容器
            data.fuplContainer = $(fuplContainer);
            //初始化必须的表单
            fun._initForm(data);
            //上传控件
            data.fupl = $("#fupl");
            //上传结束
            fun._upEnd(data);
            //上传按钮
            data.AddButt.click(function () {
                data.fupl.click();
            });
            //添加上传文件完成
            fun._fuplChange(data);
            //开始上传
            fun._UpButtClick(data);
        },
        _callback: function () {

        }
    };
    return {
        Init: _fun._init,
        CallBack: _fun._callback
    }
})();

调用

<script type="text/javascript">
        UpLoad.Init("#div_fuplButt", "#div_Save", "#fuplContainer")
    </script>

额 木有什么美感 页面不好看 勿喷