IE9 under Jquery-file-upload use (background for Java Spring MVC)

Preface the project has a page running in the IE9 environment, need a simple file upload function. Tried the upload component of the Kendo UI and found a bug in the callback function under IE9. No way online check a wave, all said Jquery-file-upload plug-in easy to use, then downloaded and used, and succeeded.

Here is a demo and a note for notes.

The first is to download the plugin and then refer to it sequentially

<Scriptsrc= "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></Script>//suggest using jquery 1.8 or later<Scriptsrc= "Js/vendor/jquery.ui.widget.js"></Script><Scriptsrc= "Js/cors/jquery.xdr-transport.js"></Script><Scriptsrc= "Js/jquery.iframe-transport.js"></Script>//This file should be loaded in IE to resolve cross-domain issues<Scriptsrc= "Js/jquery.fileupload.js"></Script><Scriptsrc= "Js/jquery.fileupload-process.js"></Script><Scriptsrc= "Jquery.fileupload-validate.js"></Script>//If required file type validation must be introduced

Then add a simple input:

<name= "Files"  id= "Files"  type= "file "

Note that, if for the sake of the interface, to hide this input, and then use their own button, and in the JS trigger this input Click event, in the IE8 will be unable to trigger the callback bug, I did not encounter this problem IE9.

Then the JS code:

$ ("#files"). FileUpload ({url:uploadurl,//The URL of the server DataType:' JSON ',//Set return data format autoupload:true, Acceptfiletypes:/(\.| \/) (Png|jp?g|gif) $/i,//file Format RestrictionsformData: {}//can pass in ParametersProcessfail:function(E, data) {//Verify file typevarCurrentfile =Data.files[data.index]; if(Data.files.error &&currentfile.error) {alert ("File type is wrong!"); }}, Done:function(E, data) {varresult =Json.parse (Data.result); Note here that after IE returns data, it is processed with json.parse//and then processed by itself}}). Error (function () {     console.log (arguments,' Error '); });

Before the back-end code to say, under normal circumstances, after uploading a file IE9, the download JSON file will pop up the box. Checked the information and found

This is because the jquery file upload is used XHR in the delivery of data, the server side is usually returned by the JSON format of the response, but IE will mistakenly think of these JSON response is a file transfer, and then directly pop up the download box to ask if you need to download.

The workaround is to change the response header from Content-type:application/json to Content-type:text/plain or text/html

The following Java backend code:

@RequestMapping (value = "/uploadurl", method = Requestmethod.post, produces = {"Text/plain"})    public< /c2> String Upload (@RequestParam multipartfile files, @RequestParam Map formData) {        inputstream fis//< /c5> file stream        // file path         // do your own operation               result= "true ";
        return result;
    }

Finally, there is a problem where the return value after changing the response header is preferably a string or JSON type, otherwise the front end cannot trigger the callback function.

The first attempt to jquery-file-upload, there are many powerful features also useless, backstage code is relatively concise, and other self-groping.

Well, at the end of the groove a word ie really should be eliminated.

IE9 under Jquery-file-upload use (background for Java Spring MVC)