Blueimp file uploader with IE9

I am uploading a file to a REST API using this plugin in an AngularJS application. When seconds after the 'fileuploaddone' event fires, I get a yellow notification from Internet Explorer saying: Would you like to save \ open the

Screenshot attached.

Iframe based uploads require a Content-type of text/plain or text/html for the JSON response - they will show an undesired download dialog if the iframe response is set to application/json.

Source: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation

You will need to set the right Content-Type as explained in the link above.

Blueimp jQuery File Upload settings to support modern browsers as well as IE9 (tested on IE9 and Chrome 39)

Note: I am using JAVA, Spring 3 on server side

index.html file

<!doctype html>
<!--[if lt IE 9]>      <html class="lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html>         <!--<![endif]-->

     <head>....</head>
     <body>....</body>
</html>

test.js file

var options = {
    url: 'api/test/fileupload',
    maxFileSize: 10000000,
    formData: {
        id: 1
    }
};

if ($('html').hasClass('ie9') || $('html').hasClass('lt-ie9')) {
    options.forceIframeTransport = true;
} else {
    options.dataType = 'json';
}

$('#fileUploadInput').fileupload(options);

test.java file

@POST
@Path("/api/test/fileupload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces({ "text/plain" })
public Response uploadFile(
        @Context HttpServletResponse response,
        @Context HttpServletRequest request,
        @FormDataParam("id") Long id,
        @FormDataParam("files[]") FormDataContentDisposition fileDetail,
        @FormDataParam("files[]") InputStream uploadedInputStream) {
    String header = request.getHeader("accept");
    String returnContentType = MediaType.APPLICATION_XML;
    VEWTestAttachment attObj = testMgr.saveAttachment(id,fileDetail,uploadedInputStream);
    if(header.indexOf(MediaType.APPLICATION_JSON) >= 0){
        returnContentType = MediaType.APPLICATION_JSON;
    }
    response.setContentType(returnContentType);
    return Response
            .ok(attObj,returnContentType)
            .build();
}

来源：https://stackoverflow.com/questions/19640211/blueimp-file-uploader-with-ie9

标签

internet-explorer

angularjs

internet-explorer-9

blueimp

ajax-upload