IE9/IE10使用隐藏iframe异步上传文件问题的解决方案

表单上传原理

    <form method="post" action="/Test/Upload" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" />
    </form>

为form表单添加属性enctype="multipart/form-data",选择文件后提交表单即可上传文件。
C#服务器端通过HttpPostedFileBase file来接收文件。

异步上传原理

表单提交是同步的，会阻塞页面，可以将表单提交到一个iframe中，父页面就不会阻塞了，需要设置form的target属性等于iframe的name属性.
form[target]=iframe[name]

上传完成后事件

服务器端只是单纯对表单提交的响应，可以返回一段script脚本作为http响应流，执行javascript。

Response.Write('<script>alert();</script>'); //响应一段script脚本
Response.Flush(); //强制清空缓冲区，写入响应流
对于iframe异步上传情形，Response是iframe的响应，
返回的script脚本中，可以使用parent获取父页面的window对象。

场景

为了把异步上传封装成插件，需要对选择文件和上传成功事件提供javascript接口，就不得不用javascript来触发表单中file按钮的点击。

    $(':file').click();

这样做，会打开选择文件对话框。
然后，调用$('form').submit();或$(':submit').click();来提交表单。

问题

在IE9/IE10中，$(':file').click();这样触发的选择文件操作，不能上传文件。

原因

E9/IE10限制，file按钮必须由用户点击才可以上传，虽然$(':file').click();可以选择文件，但是提交表单会先清空选取的内容，多次点击才会上传选中的文件。

解决方案

限制file按钮的大小与点击的按钮大小相同width:28px;height:19px;，并设置绝对定位position:absolute;，同时透明度设置为opacity:0;
某个按钮点击时，在onmouseover事件中，把file按钮移动到该按钮上面;

html：

    <a id="u1" onmouseover="javascript:infobrain.onUpload(this)">上传</a>'; //按钮
    //隐藏form与iframe
    <div style="visibility: hidden">
            <form id="upload-form" action="../actions/uploadDirect" method="post" target="if-upload" 
            accept-charset="utf-8" enctype="multipart/form-data">
                <input name="fileName" />
                <input id="upload" type="file" 
                name="fileData" accept=".rar,application/pdf" 
                style="width:28px;height:19px;font-size:15px;opacity:0;position: absolute;"/>
            </form>
            <iframe id="if-upload" name="if-upload"></iframe>
        </div>

js

    var infobrain = {
    onUpload : function(_this) {
            setTimeout(function () {
                    $("#upload").css("visibility","visible");
                    var left=$(_this).offset().left,
                    top = $(_this).offset().top;
                    $("#upload").css({left:left,top:top});
                },200);
            }
            }

注意

本方法实现原理是：隐藏上传文件的form表单与iframe，当鼠标滑动到上传按钮时，首先获取上传按钮的位置，同时把file框移到上传字体的上方并设置visibility:visible,由于设置了其透明度为0，所以可以模拟点击了上传按钮，但实际点击的是file框，这样就可以解决在IE9/IE10中file按钮必须由用户点击才可以上传的问题；

本文参考了：IE9/IE10使用隐藏iframe异步上传文件问题

由于本篇文章亲测的时候会出现不稳定情况，且设置的长宽均为0的时候进行点击会出现无法选择到file框，故本人进行了改进，实测在IE9/IE10均可实现；

当然，我这种方法是一种取巧的方式，如果你有更好的方式可以解决这个问题，可以留言，大家一块讨论一下