Shulou(Shulou.com)06/03 Report--

This article mainly introduces Ajax how to achieve form asynchronous upload files, the article is very detailed, has a certain reference value, interested friends must read it!

1. cause

When doing the foreground page, you need to call WebAPI's Post request, send some fields and files (equivalent to sending the form asynchronously through ajax and get the return result), and then get the return value to determine whether it is successful or not.

two。 Try

First try "jQuery Form Plugin", this thing is a huge pit, to achieve his compatibility with jquery1.9.2 is not very good, it is not easy to solve the problem of $. Browser, found that he uploaded files can not get a return value.

Submit ($("# view"). AjaxSubmit ({type: "post", url: ".. / api/Article/Add", dataType: "json", success: function (msg) {console.log (msg);}, error: function (msg) {$("# resultBox") .html ("failed to connect to the server"); console.log (msg);}})

For example, the above code, but how to configure it? as long as the file is uploaded, the msg returned in success must be null (under chromium browser), but there is actually a return value, and it is normal when there is no file. What is even more frightening is that the IE/EDGE prompts you to download the Json return value.

Flipped through the source code of jquery.form.js, found that he is using Iframe to achieve pseudo-Ajax, not halal, Pass!

/ / are there files to upload?var files = $('input:file', this). FieldValue (); var found = false;for (var jung0; j < files.length; jacks +) if (files [j]) found = true;if (options.iframe | | found) / / options.iframe allows user to force iframe modefileUpload (); else$.ajax (options)

This is to call 2 different functions with or without files.

3. Solution

After many counter-investigations, it is found that xhr (XMLHttpRequest) is a good thing. After testing, both mainstream browsers and mobile browsers support this thing. Here's how to get the native XMLHttpRequest object upload form (file) in jquery/zepto 's ajax. Reference article: https://www.jb51.net/article/91267.htm

Function AjaxForm (formID, options) {var form = $(formID); / / take the form object directly as a parameter new FormData object var formData = new FormData (form [0]); $("input [type = 'file']") .forEach (function (item, I) {/ / get the file object is equivalent to $_ FILES data var domFile = $(item) [0] .files [0] that can be directly post; / / append file object formData.append (' file', domFile) }) if (! options) options = {}; options.url = options.url? Options.url: form.attr ("action"); options.type = options.type? Options.type: form.attr ("method"); options.data = formData;options.processData = false; / / tell jQuery not to process the dataoptions.contentType = false; / / tell jQuery not to set contentTypeoptions.xhr = options.xhr? Options.xhr: function () {/ / this is the key to getting the native xhr object to do everything previously done var xhr = $.ajaxSettings.xhr (); xhr.upload.onload = function () {console.log ("onload");} xhr.upload.onprogress = function (ev) {if (ev.lengthComputable) {var percent = 100 * ev.loaded / ev.total;console.log (percent, ev)} return xhr;}; options.success = options.success? Options.success: function (data) {alert (data)}; $.ajax (options);} / call $("# sub") .click (function (e) {AjaxForm ("# myForm");}); above is all the content of the article "how to upload files asynchronously with Ajax form". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.