"JS" Ajax implementation without refreshing file upload

I. Summary

Recently doing something, you need to implement a page without refreshing file upload, currently see the method has two

1) the page is not refreshed by hiding the IFRAME, and is suitable for not caring about the upload results.

1 <formTarget= "Hiddenframe"Method= "POST"enctype= "Multipart/form-data"Action= ' xx '>2     <inputvalue=""/>3     <iframename= "Hiddenframe"style= "Display:none"/>4 </form>

2) Use an AJAX request to transfer a binary file using the Formdata object for obtaining and processing the data returned from the backend

1 varFD =NewFormData ($ (' #form '));2 $.ajax ({3URL: ",4Type: ' Get ',5 DATA:FD,6Asyncfalse,7Cachefalse,8ContentType:false,//tell jquery not to set the Content-type request header9ProcessData:false,//tell jquery not to process the data sentTenSuccessfunction(data) { One  A     } -})

The first implementation of the two methods is simple, the browser support is high, the second type of implementation of the Formdata, the upload is successful, or for uploading the contents of the file to resolve the content of processing, but the browser support rate is not high, specifically as follows

Desktop side:

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	7+	4.0 (2.0)	+	12+	5+
Support filename Parameters	(Yes)	22.0 (22.0)	?	?	?

Mobile side:

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3.0		4.0 (2.0)		12+
support filename parameter		22.0 (22.0)

The FormData is a new interface for the XMLHttpRequest level 2, with two main types of functions

1） 封装form 表单

2) Transfer binary files for no-refresh file upload

Formdata's API

Fd.append (key, value); Data can be added on the basis of encapsulating form forms

"JS" Ajax implementation without refreshing file upload