html5实现多文件上传

<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);
	    }
	});
}

 
 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值