無刷新多文件上傳

[css] 
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; 
        } 
        #p_fuplButt, #p_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
[html] 
<input type="file" id="fupl" name="fupl" style="display: none" /> 
    <p id="fuplContainer"> 
    </p> 
    <p id="p_fuplButt"> 
        添加文件</p> 
    <p id="p_Save"> 
        開始上傳</p> 
JS
[javascript] 

var UpLoad = (function () { 
    var _data = { 
        fuplQuere: [], 
        pQuere: [], 
        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('<p id="p_count"></p>') 
            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.pQuere.shift(); 
                    shift.stop(); 
                    shift.find(".rateStripIn").animate({ 
                        width: "100%" 
                    }, 100, function () { 
                        shift.find(".rate").html('<p class="loadOK">√ 上傳完成</p>'); 
                        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 psub; 
                var index; 
                for (var j = 0; j < i; j++) { 
                    var name = files[j].name; 
                    if (name.length > 8) { 
                        name = name.substring(0, 8) + "…"; 
                    } 
                    psub = $('<p class="sub"><p style="height:30%" ></p><p style="float:left;width:112px">' + name + '</p></p>'); 
                    data.fuplContainer.append(psub); 
                    index = data.pQuere.length; 
                    psub.append('<p class="rate"><p class="rateStrip"><p class="rateStripIn"></p></p><a href="javascript:void(0)" class="X" data-index=' + index + '>X</a>') 
                    data.pQuere.push(psub); 
                    psub.find(".X").click(function () { 
                        $(this).closest(".sub").fadeOut(200, function () { 
                            $(this).remove(); 
                        }); 
                        var i = $(this).attr("data-index"); 
                        data.pQuere.splice(i, 1); 
                        data.fuplQuere.splice(i, 1); 
                    }) 
                    psub.fadeIn(500); 
                    data.h += parseFloat(psub.css("height")); 
                } 
                if (data.h >= 400) { 
                    data.fuplContainer.stop(); 
                    data.fuplContainer.animate({ 
                        height: parseFloat(data.fuplContainer.css("height")) + parseFloat(psub.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.pQuere[0].find(".rateStripIn").animate({ 
                        width: "85%" 
                    }, 2000) 
                    $("#p_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 
    } 
})(); 

調用

[javascript] 
<script type="text/javascript"> 
        UpLoad.Init("#p_fuplButt", "#p_Save", "#fuplContainer") 
    </script> 

 
作者:chaiyining007

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。