首先引入ajaxFileUpload插件
然后:
//上传图片
function uploads(){
var imgSrc = '', imgArr = [], strSrc = '' ;
var file = document.getElementById("imgFile");
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && (trim_Version=="MSIE8.0"||trim_Version=="MSIE9.0")){
imgSrc = file.value ;
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 && strSrc.localeCompare('jpeg') === 0 && strSrc.localeCompare('JPG') === 0 && strSrc.localeCompare('JPEG') === 0&& strSrc.localeCompare('bmp') === 0&& strSrc.localeCompare('gif') === 0&& strSrc.localeCompare('png') === 0){
alert("图片类型必须是.bmp,.gif,.jpg,.jpeg,.png中的一种");
document.getElementById("imgFile").value = null;
return false;
}else if(strSrc===0){
alert("请上传图片");
return false;
}
}else{
var fileSize = file.files[0].size;
var fname=file.files[0].name;
if(fileSize > 5242880){
alert("上传文件不能超过5M");
document.getElementById("imgFile").value = null;
return false;
}else{
if(fname==""){
alert("请上传图片");
return false;
} else {
if(!/\.(jpg|jpeg|JPG|JPEG|bmp|gif|png)$/.test(fname)) {
alert("图片类型必须是.bmp,.gif,.jpg,.jpeg,.png中的一种"); document.getElementById("imgFile").value = null;
return false;
}
}
}
}
$.ajaxFileUpload({
url:"http://upload.wajiu.com/image/uploadImage",
data: { imageType:"returnOrder"},
async : false,
fileElementId:'imgFile', //文件选择框的id属性
dataType:'json', //服务器返回的格式,可以是json或xml等
success:function(data, status){//服务器响应成功时的处理函数
if(data[0] == "success"){
//0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
var html=' <div class="img-upload"><span class="imgCover"><img src="'+data[1]+'"/></span><span class="deleteImg color-blue" onclick="deleteImg(this);">删除</span></div>';
$("#showPic").append(html);
uploadImgNumber();
}else{
if(data[0] == "error"){
alert("图片上传失败,请重试!");
}
}
},
error:function(data, status){ //服务器响应失败时的处理函数
if(status == "error"){
alert("图片上传失败,请重试!");
}
}
});
}
//点击上传图片
$("#grMain-ph").on("change",'#imgFile', function () {
uploads();
});
//html
<input type="file" name="myfiles" class="imgFile" id="imgFile"/>