[.NET] HTML5 new features - FromData

 FromData is defined in the XMLHttpRequest, can form a serialization, there are three common uses:

1.ajax upload files domain

2. The value of the controls on the form, assignment, additional, key exists, delete key

3.ajax submit data on the form

 

Examples: 1.ajax upload files domain

$('input[type="file"]').on('change', function(){
            var file = this.files[0];
            var formData = new FormData($('#uploadImg')[0]);
            formData.append('file', file);
            console.log(formData.get('file'))
            $.ajax({
                url: 'b.php',
                type: 'POST',
                cache: false,
                data: formData,
                //dataType: 'json',
                //async: false,
                processData: false,
                contentType: false,
            }).done(function(res) {
                console.log(res)
            }).fail(function(res) {
                console.log(res)
            });
        });

processData: true form is converted to a string, false is not converted

contentType: Similar dataType, but is returned by the backend dataType format, such as JSON, text, this is the front end of transmission data format, default file application / X-WWW-form-urlencoded, to false is not given, there are used:

4 common transmission encoding format: 
file application / X-WWW-form-urlencoded: key = val encoded form in accordance with 
application / json: json serialized transmission, WebAPI be used 
multipart / form-data: generally used to upload files 
text / xml: xml form

In C #, HttpPostedFile may be received, then the SaveAs, a simple example:

HttpPostedFile imgFile = Request.Files["file"];
imgFile.SaveAs("路径");

 

Example: two pairs of controls on the form assignment

< Form the above mentioned id = "advForm" > 
    < the p- > Ad Name: < the INPUT of the type = "text" name = "advName"   value = "xixi" > </ the p- > 
    < the p- > Advertising Category: < the SELECT name = "advType" > 
        < Option value = ". 1" > carousel FIG </ Option > 
        < Option value = "2" > rotation view of the bottom ad </ Option >
        <option value="3"> Hot Recycling advertising </ the Option > 
        < the Option value = "4" > excellent product selection of advertising </ the Option > 
    </ the SELECT > </ the p- > 
    < the p- > < the INPUT of the type = "the Button" the above mentioned id = "btn" value = "Add" > </ P > 
</ form >

 

Value with get ()

// get the form element button 
var btn = document.querySelector ( "# btn" );
 // add the button click event 
btn.onclick = function () {
     // an ID to get among the pages form form elements 
    var form = the Document. querySelector ( "# advForm" );
     // form elements obtained as a parameter, to initialize formData 
    var FormData = new new the FormData (form);
     // get the element name is the value by the value of the get method advName 
    console.log (formdata. get ( "advName")); // xixi 
    // obtained by name get value method advType element value 
    the console.log (formdata.get ( "advType")); // . 1 
}

 

Assignment, with set ()

// Create FormData by an empty object constructor 
var FormData = new new FormData ();
 // if the key value does not exist adds a name for the key value data into data laoliu 
formdata.set ( "name", "laoli " );
 // read by the get method key value for the first name of 
the console.log (formdata.get ( "name")); // laoli

 

Additional, with append ()

// Create an empty object constructor by FormData 
var FormData = new new FormData ();
 // by append () method of the key name is appended. Laoliu data 
formdata.append ( "name", "laoliu ");

 

key is present, a has ()

// Create FormData by an empty object constructor 
var FormData = new new FormData ();
 // by append () method name is appended at the end key value data laoliu 
formdata.append ( "name", "laoliu" );
 / / is determined whether the key is a name of the data comprising 
the console.log (formdata.has ( "name")); // to true

 

Delete key, with the delete ()

// create an empty object by FormData constructor 
var FormData = new new FormData (); 

// delete key as the value of the name of 
FormData. The Delete ( "name");

 

Examples: ajax submit data on the form, in fact, like to upload a file with ajax.

In C #, you can Request.Form [ ""] received

string abc = Request.Form["abc"];

 

 

 

reference:

https://www.jianshu.com/p/e984c3619019