Summary: In form forms, page refreshes occur after each submission. With ajax, file type requests cannot be made.

1. Use FormData to make Ajax requests and upload files (version 1.2 is not supported when using jq, preferably version 2.0 or more)

<!--html Code-->
<form id= "uploadForm">  
      <p>File name: <input type="text" name="filename" value= ""/></p>  
      <p>Upload files: <input id="upload" type="file" name="file"/></p>  
      <input type="button" value="upload" onclick="upload()" />  
</form>  

//js code
function upload() {  
     var formData = new FormData($( "#uploadForm" )[0]);  
     //perhaps
     //var formData = new FormData();
     //var name = $("input").val();
     //formData.append("file",$("#upload")[0].files[0]);
     //formData.append("name",name);
     $.ajax({  
          url: 'Interface Path',  
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  // Tell jQuery not to set the Content-Type request header
          processData: false,  // Tell jQuery not to process the data sent
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
} 

2. Use of jquery. form. JS

<!--html Code-->
<form id= "uploadForm">  
      <p>File name: <input type="text" name="filename" value= ""/></p>  
      <p>Upload files: <input id="upload" type="file" name="file"/></p>  
      <input type="button" value="upload" onclick="upload()" />  
</form>  

<!--html Code-->
<p>Upload files: <input id="upload" type="file" name="file"/></p>  
<input type="button" value="upload" onclick="upload()" />  

var options = {
  target: '#output1', // The data from the service is displayed in the target, ajax partial refresh
  beforeSubmit: showRequest, // Processing functions before ajax submission
  success:  showResponse // After successful delivery
};
$('#formToUpdate').submit(function() {
  $(this).ajaxSubmit(options);
  //In the case of a form
  return false;  //Very important. If false, it means no jump.
  //Processing on this page, ajax, is a traditional form jump if it is not false.
 });

3. Use of ajaxfileupload.js Blog Links)
The principle is to create hidden forms and iframe s and submit them with JS to get the return value.
ajaxFileUpload is a jQuery plug-in that uploads files asynchronously
Syntax: $. ajaxFileUpload([options])
options parameter description:
1. url. Upload the address of the processing program. 　　
2. fileElementId.
3. Seceuri: Whether to enable secure submission by default is false.
4, dataType. The data type returned by the server. It can be xml,script,json,html. If not, jQuery will automatically judge.
5. success. Submit a handler that executes automatically after a successful submission. The parameter data is the data returned by the server.
6. error. Submit a failed auto-execution handler.
7. Data. Customize parameters. This is a useful thing to use when data is related to uploaded pictures.
8, type) When you submit a custom parameter, set it to post

Error prompt:

1, SyntaxError: missing; before state error
 If this error occurs, you need to check whether the url path is accessible
 2, SyntaxError: syntax error
 If this error occurs, you need to check for grammatical errors in the server daemon that handles the submission operation
 3, SyntaxError: invalid property id error
 If this error occurs, you need to check whether the text field attribute ID exists
 4, SyntaxError: missing} in XML expression error
 If this error occurs, you need to check that the file name is consistent or does not exist
 5. Other custom errors
 You can use the variable $error direct printing method to check whether the parameters are correct, which is much more convenient than the invalid error hints above.

Usage method:

Step 1: Introduce jQuery and ajaxFileUpload plug-ins first. Pay attention to the order. Needless to say, all plug-ins are like this.

    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

Step 2: HTML code:

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="upload" />
    <p><img id="img1" alt="Upload success" src="" /></p>
</body>

Step 3: JS code

   <script src="jquery-1.7.1.js" type="text/javascript"></script>
   <script src="ajaxfileupload.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {
           $(":button").click(function () {
               ajaxFileUpload();
           })
       })
       function ajaxFileUpload() {
           $.ajaxFileUpload
           (
               {
                   url: '/upload.aspx', //Server-side request address for file upload
                   secureuri: false, //Whether a security protocol is required is usually set to false
                   fileElementId: 'file1', //ID of file upload domain
                   dataType: 'json', //The return value type is generally set to json
                   success: function (data, status)  //Server Success Response Processing Function
                   {
                       $("#img1").attr("src", data.imgurl);
                       if (typeof (data.error) != 'undefined') {
                           if (data.error != '') {
                               alert(data.error);
                           } else {
                               alert(data.msg);
                           }
                       }
                   },
                   error: function (data, status, e)//Server response failure handler
                   {
                       alert(e);
                   }
               }
           )
           return false;
       }
   </script>

Summary: ajaxfileupload plug-in, upload files can be achieved, but not with parameters, after analysis, it should be the plug-in internal lack of processing parameters, leading to the failure to upload files with parameters; formdata method has certain requirements for compatibility; jquery.form.js plug-in is still very good use effect, recommended this plug-in.