无刷新上传文件（支持ie8+）

思路：

利用form表单提交文件，然后提交成功后跳转到iframe 里面，把这个iframe 隐藏掉，然后返回的信息就渲染到iframe 里面，再获取iframe 里面的内容。
（这里浏览器会报有关X-Frame-Options 的问题，解决办法：https://stackoverflow.com/questions/28647136/how-to-disable-x-frame-options-response-header-in-spring-security）

如果只需要兼容ie9+,可以使用formData,再使用ajax异步上传即可。

下面是兼容ie8的做法

html

 <div class="upload-file">
     <div class="uf-button">
         <form id="uf-form" method="post" 
                action="/uploadAnnex" 
                target="uf-frame"  
                encoding="multipart/form-data" 
                enctype="multipart/form-data">
                <button id="uf-btn-upload" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus"></span>
                          添加
                </button>
                <input id="uf-input-upload" type="file" name="file"/>
            </form>
            <iframe id="uf-frame" name="uf-frame" style="visibility:hidden;height: 0;border: 0;"></iframe>
    </div>
</div>

css

 .upload-file .uf-button form {
            position: relative;
}

.upload-file .uf-button form input {
    position: absolute;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    height: 100%;
     width: 100%;
}

这里要特别注意，要把input 放在最上面然后设透明度为0。否则，由于ie8的安全机制，如果通过其它方式去触发input[type="file"]的点击事件，最终会获取不到input[type="file"] 的文件，导致表单上传的文件为空。

js

$('#uf-input-upload').on('change', function (e) {
    if (e.target.value.length>0) {
        $('#uf-form').submit();
        console.log("上传文件");
    }
});
//监听frame的load事件判断是否有返回信息
$('#uf-frame').on('load', function () {
    var response = $("#uf-frame").contents().find("body").html();
    console.log(response);
    if (response.length > 0) {
        try {
            response = JSON.parse(response);
           console.log("返回的信息:"+response );
    } else {
        message.add("上传文件失败", "error");
    }

});

这里要注意，由于返回的信息用iframe 接受，所以要返回text，然后再解析，而不要直接返回json格式的数据。