ajax异步上传图片

首先需要注意分两种情况:

1: 小于等于ie8的情况:需要ajaxFileUpload.js,下载附件

if(navigator.userAgent.indexOf("MSIE 6.0")>0 || navigator.userAgent.indexOf("MSIE 7.0")>0 || navigator.userAgent.indexOf("MSIE 8.0")>0){
      $.ajaxFileUpload({
        url: "..url",
        secureuri: false, // 一般设置为false
        fileElementId: "upload_image_field", // 文件上传表单的id <input type="file" id="fileUpload" name="file" />
        dataType: 'json', // 返回值类型 一般设置为json
        success: function (data, status) {
          var data = eval("(" + data + ")");
          if(data.status == true){
            ...
          }else{
            .....
          }

        }
      });
    }




2:大于ie8的情况:


      var fileObj = document.getElementById("upload_image_field").files[0]
      if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        alert("请选择图片")
        return
      }
      var formFile = new FormData();
      formFile.append("action", "url...");
      formFile.append("image", fileObj); //加入文件对象
      var data = formFile;
      $.ajax({
        url: "url..",
        data: data,
        type: "Post",
        dataType: "json",
        cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
        success: function (data) {
          var data = eval("(" + data + ")");
          if(data.status == true){
            ...
          }else{
            ...
          }
        }
      })



注意: 如果不是直接点击文件框上传文件,例如点击图标来上传,要注意在ie8下直接trigger触发后,无法提交表单,可以把文件框设置为透明,然后覆盖图标。设置透明需要注意ie9以下不支持opacity,所以需要使用filter。filter:alpha(opacity=0);opacity: 0;,


input file 有的浏览器上on change只能执行一次,这样需要每执行完一次就替换掉该input文件框

$("#upload_image_field").replaceWith('<input type="file" name="image" id="upload_image_field" style="display: inline-block;width:30px;">')

猜你喜欢

转载自zhangcaiyanbeyond.iteye.com/blog/2398065