表单上传原理
<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均可实现;
当然,我这种方法是一种取巧的方式,如果你有更好的方式可以解决这个问题,可以留言,大家一块讨论一下