JQuery causes and solutions for failure of uploading files to the backend in IE9 (ajaxfileupload. js fourth bullet), jqueryie9

Source: Internet
Author: User

JQuery causes and solutions for failure of uploading files to the backend in IE9 (ajaxfileupload. js fourth bullet), jqueryie9

The birth of the fourth bullet was completely out of my original plan. A netizen saw the previous issue about "ajaxfileupload. the question raised after the article in The js series is that I have been using chrome to test the demo and completely ignore IE browser (in fact, it is intentional, so I am too lazy to think about browser compatibility issues, haha ~), So when I used IE9 to run the demo, I found the same problem, that is, ajax asynchronous form submission cannot enter the background.

The following describes how to solve the problem. the demo uploaded in JavaScript code 3) is the benchmark, which makes it easier to understand.

Although the surface of the problem is that ajax asynchronous form submission cannot enter the background, when I go through the code in the browser, the first problem I found is the following prompt.

The cause of this problem is actually caused

function getFilePath(obj) {    if (obj) {        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {            obj.select();            return document.selection.createRange().text;        }        else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {            if (obj.files) {                return obj.files.item(0).getAsDataURL();            }            return obj.value;        }        return obj.value;    }}

This function was initially used for compatibility, but unfortunately it was self-defeating.

This function was directly posted from the Internet. At that time, I was afraid that different browsers could not directly use $ (). val () to get the selected file name. However, when using the IE browser, the document. selection. createRange (). text is a "" (empty string), so you can use obj directly. value or you do not need to use this method directly through $ (). val () to get the file name.

What surprised me is that using $ (). val () in IE can actually get the complete path of the file !!! Instead of just a file name, you don't have to upload the file before previewing. You can preview the image directly.

This problem is solved, and the code is re-run and appears

The cause of this problem is that after the jQuery-1.4.2 plug-in, has removed the handleError method, and download the demo of friends will find that the demo is used in the jQuery-2.0.3 plug-in. So just change the jQuery plug-in? No. Because jQuery-2.0.3 is used because the delegate method is supported only after the jQuery-1.7 version, but we can add the handleError method to the ajaxfileupload. js plug-in. Copy the following code to ajaxfileupload. js.

    handleError: function( s, xhr, status, e )         {        // If a local callback was specified, fire it        if ( s.error ) {            s.error.call( s.context || s, xhr, status, e );        }        // Fire the global callback        if ( s.global ) {            (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );        }    }

This problem is solved, and the code is re-run and appears

This is actually the focus of this Article. After you open your browser

jQuery(form).submit();

An exception is thrown here.

This is the reason. For security reasons, you must click the <input type = 'file'> Control to upload a file. Because the length of <input type = 'file'> is really ugly and seldom meets our aesthetic requirements, we usually hide it and use other buttons to trigger it. This is not allowed in IE9.

As for the solution, if you insist on using more beautiful upload controls, I think we should use some css techniques to block the <input type = 'file'> controls, this should be determined based on the actual situation. It is disgusting to say that Internet Explorer 9 breaks down the harmony of other browsers, and it is really confusing.

For the previous demo, if <input type = 'file'> is displayed, You need to modify the background to obtain the file name.

To

System.Web.HttpContext.Current.Request.Files[0].FileName

Change

System.IO.Path.GetFileName(System.Web.HttpContext.Current.Request.Files[0].FileName))

Because System. Web. HttpContext. Current. Request. Files [0]. FileName is a complete file path, not just a file name.

Of course, if we don't want to save the image to a local machine, we can preview it directly using the image path, but you must know that this is only suitable for IE ~~ Therefore, everyone considers it as appropriate.

 

The <input type = 'file'> control can be uploaded only after being clicked in IE9. I think there are other solutions, I hope you can share it with me.

 

Series sharing:

Solution to ASP. NET's failure to upload large files using the ajaxfileupload. js plug-in (ajaxfileupload. js first bullet)

JQuery's gradual analysis of the ajaxfileupload. js plug-in (second release of ajaxfileupload. js)

JQuery self-made upload Avatar plug-in-with Demo instance (ajaxfileupload. js third bullet)


An error occurred while using jquery's ajaxfileuploadjs and struts2 to upload new files

The getXXX method is to get the parameter value from the session. From the code you posted, This is not involved, so I think if you use System. out. println ("userIcon:" + getId_userIcon (); no id is obtained ·
For more information, see ~

In ajaxfileUploadjs, jQuery (form) submit (); ie does not go to the background, and other browsers do. Why?

File selected files are directly triggered by file files, which I have encountered before:
Create a file control when a button is clicked, and then file. click ()
This method is fine for browsers other than IE, but you must click file in IE to upload the file successfully. I will not explain the security issues that everyone knows.
Solution: create a file and click the file control to trigger the file selection. If you think the file looks bad, OK is transparent and then set the style you want, you should understand it as a smart person. Two images: (this is irrelevant to the background)

Images cannot be uploaded all the time. If you want to, I will send you an email!

Note: If you don't give a score for such a hard job, you won't be able to give it a score !!!

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.