ajax upload image asynchronously

First of all, there are two cases to pay attention to:

1: The case of less than or equal to ie8: ajaxFileUpload.js is required to download the attachment

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, // Normally set to false
        fileElementId: "upload_image_field", / / The id of the file upload form <input type="file" id="fileUpload" name="file" />
        dataType: 'json', // The return value type is generally set to json
        success: function (data, status) {
          var data = eval("(" + data + ")");
          if(data.status == true){
            ...
          }else{
            .....
          }

        }
      });
    }




2: Greater than ie8 case:


      var fileObj = document.getElementById("upload_image_field").files[0]
      if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        alert( "Please select an image")
        return
      }
      var formFile = new FormData();
      formFile.append("action", "url...");
      formFile.append("image", fileObj); //Add file object
      var data = formFile;
      $.ajax({
        url: "url..",
        data: data,
        type: "Post",
        dataType: "json",
        cache: false,//Upload files without caching
        processData: false,//For serializing the data parameter, it must be false here
        contentType: false, //must
        succeed: function (data) {
          var data = eval("(" + data + ")");
          if(data.status == true){
            ...
          }else{
            ...
          }
        }
      })



Note: If you don't directly click the file box to upload the file, for example, click the icon to upload, it should be noted that after the trigger is triggered directly under ie8, the form cannot be submitted, you can set the file box to be transparent, and then cover the icon. To set transparency, it should be noted that opacity is not supported under ie9, so you need to use filter. filter:alpha(opacity=0);opacity: 0;,


the input file on change can only be executed once on some browsers, so the input file box needs to be replaced after each execution

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