Question

我在AngularJS应用程序中使用此插件将文件上传到REST API。当'fileuploaddone'事件触发后几秒钟，我从Internet Explorer收到黄色通知说：你要保存\打开

附带截图。

enter image description here

Answer 1

基于iframe的上传需要内容类型的text / plain或text / html用于JSON响应 - 如果iframe响应设置为application / json，它们将显示不需要的下载对话框。

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

您需要按照上面的链接中的说明设置正确的内容类型。

Answer 2

Blueimp jQuery文件上传设置支持现代浏览器以及IE9（在IE9和Chrome 39上测试）

注意：我在服务器端使用JAVA，Spring 3

index.html文件

<!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文件

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文件

@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();
}

用IE9的Blueimp文件上传器

2 个答案: