为什么IE试图下载文件,如何解决?

时间:2013-08-21 10:37:45

标签: javascript spring-mvc

我有一个简单的代码,用于上传图像文件并通过隐藏的iframe和服务器的json响应显示它。它在chrome和firefox中运行良好,但不确定IE导致文件下载而不显示图像的问题。它试图下载一些239917890.json文件。在保存文件时,我可以看到内容为

{"status":"success","id":2,"path":"enoem/manage_logos/show_logo/2","errorMsg":null}

java代码

@ResponseBody
@RequestMapping(value = "/manage_logos/upload_logo/{Id}", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public EnoemLogoJson uploadLogo(@PathVariable Integer Id, @RequestParam("file") MultipartFile file,
        Model model, HttpServletResponse response) throws IOException {
    EnoemLogoJson enoemLogoJson = new EnoemLogoJson();
    EnoemConfiguration enoemConfiguration = enoemConfigurationRepository.findById(Id);        
    if (validateLogo(file)) {
        enoemLogoJson.setErrorMsg("Error");
        return enoemLogoJson;
    }
    LOGGER.info("File name is " + file.getOriginalFilename());
    enoemConfiguration.setLogo(file.getBytes());
    enoemConfigurationRepository.saveAndFlush(enoemConfiguration);
    enoemLogoJson.setStatus("success");
    enoemLogoJson.setId(Id);
    enoemLogoJson.setPath("enoem/manage_logos/show_logo/" + Id);
    return enoemLogoJson;
}

html代码

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="enoem/manage_logos/upload_logo/1">
        <div class="row">
            <input name="file" id="file" size="27" type="file">
        </div>
        <div class="btn-row">
            <input type="submit" name="action" class="cButton upload-logo-btn" value="Upload">
            <input id="close-upload-popup" type="button" value="Cancel" class="cButton cancel-btn-table">
        </div>
        <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
    </form>

的javascript

var $form = $('#file_upload_form');
    $form.unbind('submit');
    $form.bind('submit', function(a,b,c){        
        this.target = 'upload_target';
        alert('Firing in all browsers');
        $('#upload_target').load(function(d,e,f){
            alert('When file uploaded');    //Not firing in IE but IE is trying to download some data
            var data = $('#upload_target').contents().find('pre').html();
            data = $.parseJSON(data);
            if(data){
                //Here doing showing information from data object
                //working fine in chrome/firefox but not in IE
            }
        });
    });

问题出在IE9和IE10上。 (IE8未经测试)

1 个答案:

答案 0 :(得分:0)

请参考您返回的json格式。 http://json.parser.online.fr/

以如下所示的格式返回json。 “{success:”+ result +“,message:'”+ responseText +“'}