无刷新多文件上传
[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;
}
#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
[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
[javascript]
;
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
}
})();
调用
[javascript]
<script type="text/javascript">
UpLoad.Init("#div_fuplButt", "#div_Save", "#fuplContainer")
</script> 
作者：chaiyining007
