您的位置:首页 > Web前端 > HTML5

html5实现多文件上传

2015-09-23 17:17 489 查看
<input id="addImgInput" type="file" multiple="multiple" name="addImg" style="display:none;"/><pre name="code" class="javascript">//添加图片
function addImge(){
//成功个数
var successNum = 0;
//失败个数
var errorNum = 0;
//失败信息
var errorMsg = "";
var errorMsg2 = "";
$("#addImgInput").click();
$("#addImgInput").change(function(){
var files = document.getElementById("addImgInput").files;
var ireg = /image\/.*/i;
for(var i = 0, j = 0,f; f = files[i]; i++) {
if(!f.type.match(ireg)) {
//设置错误信息
errorMsg += ""+ f.name+",";
errorNum++;
if(i == files.length-1){
errorMsg2 = errorMsg.substr(0,errorMsg.length-1);
Ext.Msg.alert('错误', '<font color="red">'+errorMsg2+'</font>不是图片文件!');
}
continue;
}
successNum++;
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
j++;
if(imgs.length == 0){
document.getElementById("addImge").src = this.result;
}
imgs.push(this.result);
if(j == (files.length-errorNum)){
var msg = "成功上传"+successNum+"张图片,失败"+errorNum+"张";
if(errorMsg != ""){
errorMsg2 = errorMsg.substr(0,errorMsg.length-1);
msg += ",其中<font color='red'>"+errorMsg2+"</font>不是图片文件";
}
msg += ",是否继续上传?";
errorMsg = "";
successNum = 0;
errorNum = 0;
Ext.MessageBox.confirm("提示", msg, function (id) {
if(id=='yes'){
addImge();
}
});
}
};
})(f);
reader.readAsDataURL(f);
}
});
}




                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: