"JS" Ajax implementation without refreshing file upload

Source: Internet
Author: User
Tags types of functions

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.