The text form and the picture together Ajax commits, the form value, the picture is the object, sends some questions

The code is as follows:

    
  
   
      
  
   
      
  
   
      
  
   
      
  
   
      
  
   
      
  
    
    title        
         
 
        

   
      
  
    
     content 
             
         
     

   
      
  
           
 
    Image        
 
                

   
  submit//used the Localresizeimg plugin, compressed image: Https://github.com/think2011/localResizeIMG

In the example, there are two text forms, plus a picture, submitted to the background,
Because the normal submission can not compress the picture, so with JS in the front-end compression, with Ajax submitted to the background,
The following issues were presented during the submission process:
This is mainly related to these two items:

processData: false,contentType: false,

1. If you let these two entries take effect, request payload appears as: [object Object] , Ajax requests can be sent successfully, but jquery does not get the value of the form.

2, if the comment out these two, Google Browser console error: Uncaught TypeError: Illegal invocation , Ajax requests can not be sent.

I don't know how.

Reply content:

The code is as follows:

    
  
   
      
  
   
      
  
   
      
  
   
      
  
   
      
  
   
      
  
    
    title        
         
 
        

   
      
  
    
     content 
             
         
     

   
      
  
    
    Image        
         
 
                

   
  submit//used the Localresizeimg plugin, compressed image: Https://github.com/think2011/localResizeIMG

In the example, there are two text forms, plus a picture, submitted to the background,
Because the normal submission can not compress the picture, so with JS in the front-end compression, with Ajax submitted to the background,
The following issues were presented during the submission process:
This is mainly related to these two items:

processData: false,contentType: false,

1. If you let these two entries take effect, request payload appears as: [object Object] , Ajax requests can be sent successfully, but jquery does not get the value of the form.

2, if the comment out these two, Google Browser console error: Uncaught TypeError: Illegal invocation , Ajax requests can not be sent.

I don't know how.

Look at the following, this plugin is to use the FormData object to send the file, so you use the jQuery.ajax() data sent by the data property must be an FormData object, you can not use the FormData object as a data property of the child properties.

$.ajax({    type: "POST",    url: "{{ url('article/') }}",    dataType: 'json',    processData: false,    contentType: false,      cache: false,    data: {        title: $("#title").val(),        content: $("#content").val(),        photo: formData    //这里错了，不能把FormData对象作为data属性的子属性    }})

That's the way it should be:

$.ajax({    type: "POST",    url: "{{ url('article/') }}",    dataType: 'json',    processData: false,    contentType: false,      cache: false,    data: formData    //直接把formData对象作为data属性的值发送})

If you want to attach a field, you can use FormData the object's append method:

//这段代码要在ajax请求之前formData.append('title', $("#title").val());formData.append('content',$("#content").val());

If you want to set the field name of the picture file to photo , in the localresizeimg parameter document force actually already explained, is in you compresses the picture the code there to change such as:

lrz(this.files[0], {    width: 800,    fieldName: 'photo'    //把上传图片文件的字段设置为photo})

Also note that the FormData object in IE only version 10 or more support, other modern browsers (Firefox, Chrome, Safari, MS edge, etc.) are not a problem.

