ajaxFileUpload上传图片

首先引入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"/>