HTML5+jQuery+Ajax 实现上传图片

JavaScript代码：

var imgNum = 1;
var formData = new FormData();//初始化表单数据
var upload = new Array();        //实例化一个数组，来储存多张图片

function upload(){
	if(imgNum > 9){
		layerMsg('最多上传9张图片');
		return false;
	}

	var relFile = $("#fileBtn")[0].files[0];//图片文件流
	var objUrl = getObjectURL(relFile) ;//生成预览
	var imgHmtl = '';//初始化html
	// 实现图片预览
	if (objUrl) {
		var ident = 'img'+imgNum;
		//formData.append('img'+imgNum, relFile);        
		imgArr[ident] = relFile;
		imgHmtl += '<dl>'+
						'<dt><img src="'+objUrl+'" id="img" /></dt>'+
						'<dd onclick="delImg(this, &quot;'+ident+'&quot;)"></dd>'+
					'</dl>' ;
		$('#upLoadImg').append(imgHmtl);
		$('#upLoadImg').show();
		imgNum++;
	}
}

//删除图片
function delImg(obj, ident){
	$(obj).parent('dl').remove();//移除元素
	imgArr[ident] = '';//删除数组元素
	var ob = $('#upLoadImg').find('dl');//判断是否为删除完毕
	var num = 0;
	ob.each(function(n, i){
		if(i){
			num = 1;
			return;
		}
	})
	if(0 == num){
		$('#upLoadImg').hide();
	}
}

//预览图片，适配多个浏览器
function getObjectURL(file) {
	var url = null ; 
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}

// 提交给后台
$('#btnSubmit').on('click',function(){
	//获取图片数组
	for(var key in imgArr){
		if(imgArr[key] != ''){
			formData.append(key, imgArr[key]);
		}
 	}
 	formData.append('interface', 'Dynamic/relDynamic');
 	$.ajax({
 		url: interface,
 		type: 'post',
 		data: formData,
 		processData : false,
		contentType : false,
		//    processData : false, contentType : false,这两段一定要写上，不然和jQuery冲突。
		success: function(res){
			if(1 == res.code){
					openAlertAfter(res.message);
			} else {
				layerMsg(res.message);
			}
		},
		error: function(){
			layerMsg('提交失败');
		}
 	})
});

HTML代码：

<label for="fileBtn">
    <i class="you-ico picture-ico"></i>图片 
    <input  type="file" id="fileBtn" onChange="upload()">
 </label>
<div id="upLoadImg" style="display:none">
<!-- 							<dl>
								<dt><img src="theme/images/logo.png" id="img" /></dt>
								<dd></dd>
							</dl> -->
						</div>

转载于:https://my.oschina.net/ProgramDu/blog/524131