HTML5+jQuery+Ajax 实现上传图片

摘要: var relFile = $("#fileBtn")[0].files[0];//图片文件流
var objUrl = getObjectURL(relFile) ;//生成预览

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, "'+ident+'")"></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>