IE8使用文件域不刷新上传文件的解决方案

最近的项目里，客户要求必须兼容目前主流浏览器和IE8、IE9，其中有个功能需要导入数据，于是开启了多年未曾碰过的IE8上传文件并回调的苦逼之旅：

1、用flash上传？现在主流的浏览器想启用flash，对大部分普通用户来讲，都不是件分分钟能搞定的事，果断放弃。

2、用文本域上传吧。但是上传完文件后，界面上还需要把上传文件中的数据渲染到界面上，于是乎就选择了jquery的ajaxSubmit。上代码：

（1）html部分：

                <form id="uploadFrm" method="post" enctype="multipart/form-data">
                    <div class="col-xs-8">
                        <div class="form-group">
                            <label for="accessFile4IE"
                                   class="col-xs-2 control-label">请选择文件:</label>
                            <div class="col-xs-6">
                                <input class="form-control" id="accessFile4IE" name="accessFile4IE" type="file"
                                       accept=".mdb">
                            </div>
                            <div class="col-xs-4">
                                <button onclick="doUpload4IE()" class="btn btn-info btn-sm"><i class="fa fa-upload"></i>
                                    上传文件
                                </button>
                                <button onclick="doImport()" class="btn btn-info btn-sm"><i
                                            class="fa fa-cloud-download"></i> 接收上报数据
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

（2）js部分

function doUpload4IE(){
    if ($('#accessFile4IE').val()==null || $('#accessFile4IE').val().length<4){
        return;
    }

    var fileName=$('#accessFile4IE').val();
    if(fileName.substr(fileName.length-4).toLowerCase()!=".mdb"){
        $.mfmtAlertError('请上传mdb文件！');
        return;
    }

    $('#uploadFrm').ajaxSubmit({
            url: '/sys/uploadIE',
            type: 'post',
            dataType: 'text', //数据类型
            ContentType: 'multipart/form-data',
            // ContentType必须
            success: function (res) {
                var r = JSON.parse(res);
                if (r.result) {
                    $('#filePath').val(r.data);
                    reloadList(true);
                } else {
                    $.mfmtAlertError(r.message);
                }
            },
            error: function () {
                $.mfmtAlertError('文件上传失败！');
            }
        }
    );
    return false;
}

（3）Java部分

    @RequestMapping(value = "/uploadIE",method = RequestMethod.POST, produces = "text/plain;charset=UTF-8")
    @ResponseBody
    public String uploadIE(MultipartHttpServletRequest multRequest) {
        String uploadDir = PropertyUtil.getProperty("tmpFileDir");
        OperationResultVo result=new OperationResultVo();
        try {
            Map<String, MultipartFile> fileMap = multRequest.getFileMap();
            for (Map.Entry<String, MultipartFile> entry : fileMap.entrySet()) {
                MultipartFile mf = entry.getValue(); // 获得原始文件名
                String url = FileDUUtil.UploadFile(uploadDir, "", mf);
                result = OperationResultVo.defaultSuccessResult(url);
                break;
            }
        } catch (IOException e) {
            result = OperationResultVo.defaultFailureResult(e);
        }

        return JsonUtil.toJson(result);
    }

这里的重点是RequestMapping注解里produces =“text/plain;charset=UTF-8”不能少。

3、问题来了：点击”上传文件按钮“后，页面跳转了，ajaxSubmit的回调根本没机会执行。

4、百度吧!很多同学都说在调用了ajaxSubmit函数后，加上return false可以阻止跳转。

     在js的doUpload4IE函数里，末尾加上了return false，一点用处都没有！IE8不行，IE10不行，IE9电脑上没有。

5、继续搜索，发现可以把form的target指向一个隐藏的iframe，这样就可以阻止跳转。但是据说这样会带来新的问题：form的数据传不到后端。不管它，先试试再说！

     修改html代码：

                <form id="uploadFrm" method="post" enctype="multipart/form-data" target="hidden-frame">
                    <div class="col-xs-8">
                        <div class="form-group">
                            <label for="accessFile4IE"
                                   class="col-xs-2 control-label">请选择文件:</label>
                            <div class="col-xs-6">
                                <input class="form-control" id="accessFile4IE" name="accessFile4IE" type="file"
                                       accept=".mdb">
                            </div>
                            <div class="col-xs-4">
                                <button onclick="doUpload4IE()" class="btn btn-info btn-sm"><i class="fa fa-upload"></i>
                                    上传文件
                                </button>
                                <button onclick="doImport()" class="btn btn-info btn-sm"><i
                                            class="fa fa-cloud-download"></i> 接收上报数据
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <iframe name="hidden-frame" class="hidden-frame" style="display: none" id="hiddenFrame"></iframe>

修改之后，可以了！既没有跳转，同时也把文件post到了服务端，ajaxSubmit的回调函数也成功执行了。