JQuery about the IE9 upload file can not enter the background problem causes and solutions (ajaxfileupload.js fourth bomb)

The birth of the four is completely not in their original plan, is a netizen read the previous article on the "Ajaxfileupload.js series" after the question raised, because he has been using Chrome browser to test the demo, completely ignore IE browser (actually deliberately, Too lazy to think of browser-compatible issues, haha ~), so when I use IE9 to run the demo, I did find the same problem, that is, Ajax asynchronous Submission form can not enter the background .

The following is the process of solving the whole problem, which is much easier to understand, based on the demo I uploaded in the jQuery homemade upload avatar plugin-with demo instance (ajaxfileupload.js third bomb).

Although the entire problem surface is the Ajax asynchronous submission form does not enter the background, but when I go through the browser with the code, the first problem I found is the following prompt.

The reason for this problem is actually to blame

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) {ret            Urn  obj.files.item (0). Getasdataurl ();        } return  obj.value;    } return  obj.value; }}

This function, originally added to this function is to be compatible, unfortunately, but self-defeating.

This function is posted directly from the Internet, at that time is afraid of different browsers directly with $ (). Val () does not get the selected file name. But when using IE, this code actually returns the Document.selection.createRange (). Text This is a "" (empty string), so this block can be used directly with obj.value or without using this method directly through $ () . Val () Gets the file name on the line.

What surprises me is that you use $ () in IE. val () can actually get the full path of the file!!! And not just a file name, so you don't have to upload and preview, you can preview the image directly.

This problem is solved, rerun the code, appear

The reason for this problem is that after the jQuery-1.4.2 plugin, has removed the handleError method, and downloaded the demo friend will find that the demo is using the jQuery-2.0.3 plugin. So is it okay to change the jquery plugin? No way. Because the jQuery-2.0.3 is used because the delegate method is supported only after the jQuery-1.7 version, we can add the handleError method to the Ajaxfileupload.js plugin. Copy the code below to Ajaxfileupload.js.

 HandleError: function  (S, xhr, status, E) {//If a local callback is 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 solves the problem, re-runs the code again, appears

Here is actually the main point of this article, open the browser followed, is in

JQuery (Form). Submit ();

This throws an exception.

The reason is this,ie for security reasons, upload files must be clicked <input type= ' file ' > control itself to upload successfully. And because <input type= ' file ' > is so ugly that it seldom satisfies our aesthetic, we usually hide it and then use the other button to trigger it. And this is not allowed under the IE9.

As for the solution, if you stick with the more beautiful upload control, then I think with some CSS techniques, put <input type= ' file ' > control under the cover of what, this still depends on the actual situation, said the more disgusting, on a IE9, Destroy the harmony of other browsers, it is really called scratching the heart of the liver.

For the previous demo, if the <input type= ' file ' > display, then the corresponding background also to be modified, mainly to get the file name part

To add

System.web.httpcontext.current.request.files[0]. FileName

Change into

System.IO.Path.GetFileName (System.web.httpcontext.current.request.files[0]. FileName))

Because of the system.web.httpcontext.current.request.files[0 at this time]. FileName is a full file path, not just a filename.

Of course, if we do not want to save the picture first to local, you can directly use the image path to preview, but you know, this is only suitable for IE AH ~ ~ So, we consider.

About this <input type= ' file ' > control in IE9 can have to be actually clicked to upload the problem, I think there must be other solutions, I hope to know that friends can share.

Series Sharing:

The solution to the failure of uploading large files using the Ajaxfileupload.js plugin (ajaxfileupload.js first bomb)

"JQuery on Ajaxfileupload.js plug-in analysis (ajaxfileupload.js second bomb)"

"JQuery Homemade upload Avatar plugin-with demo instance (ajaxfileupload.js third bomb)"

JQuery about the IE9 upload file can not enter the background problem causes and solutions (ajaxfileupload.js fourth bomb)