记录一下让我感觉头疼的Web文件上传解决办法

最新推荐文章于 2020-10-15 10:17:26 发布

wooddy1982

最新推荐文章于 2020-10-15 10:17:26 发布

阅读量188

点赞数

文章标签： WEB 文件上传

本文链接：https://blog.csdn.net/wooddy1982/article/details/80017760

版权

　　最近做Web项目用到文件上传，以前没感觉怎么头疼，可能是老了这回怎么地就没做出来，还是翻以前的代码算是好用了。松口气吧！！！测试了几个版本的浏览器，IE8、IE11和谷歌，就IE8没什么问题，这给我郁闷的……

　　先说一下我的解决问题的方法，页面加载一个IFRAME，IFRAME里面加载一个页面，页面中实现文件表单提交，通过脚本触发INPUT点击事件，选择文件后触发表单提交完成文件上传。我的代码如下：

Upload.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form" enctype="multipart/form-data" method="post">
<input id="file" name="file" type="file" οnchange="document.getElementById('form').submit();" />
<input id="path" name="path" type="text" />
</form>
<script type="text/javascript">
<%=result%> // 用来调用上传文件完成后的，父页面的回调函数window.parent.onUploadComplete({"succeed":true,"path":"文件保存的虚拟路径","name":"文件名称"});
</script>
</body>

</html>
List.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<a runat="server" id="lbtnAdd" class="easyui-linkbutton" data-options="iconCls:'icon-add'" href="javascript:;" οnclick="edit()" >添加</a>
<iframe id="ifrmUpload" name="ifrmUpload" src="about:blank" style="width: 0; height: 0;"></iframe>
<script type="text/javascript">
var $iframe=$("#ifrmUpload");
var W=window.top;

function upload_complete(result) {
if(result.succeed) {
W.$.messager.progress("bar").find(".progressbar-text").text("正在保存记录…");
setTimeout(function () {
var row={
"ZBBH": '<%=row["JLBH"]%>',
"FJMC": result.name,
"FJLJ": result.path
};
jQuery.post("Handler.ashx?op=save",row,function (r) {
if(!r.succeed||r.exception) {
W.show_alert({ msg: r.msg,icon: 'error' });
return;
}
W.$.messager.progress("close");
find();
$iframe.attr("src","about:blank");
},"json");
},0);
} else {
W.$.messager.progress("close");
W.show_alert({ msg: result.message,icon: 'error' });
find();
$iframe.attr("src","about:blank");
}
}

function edit() {
$iframe.attr("src","/Admin/Upload.aspx");
$iframe.on("load",function () {
$iframe.contents().find("#path").val('/Contract/Attach/<%=row["HTBH"]%>/');
$iframe.contents().find("#file").on("change",function () {
W.$.messager.progress({ "title": "上传附件","text": "正在上传附件…","value": 100,"interval": 0 });
W.$.messager.progress("bar").css("border","none");
})[0].click();
$iframe.off("load");
});
}

function find() {
$gridTop.datagrid("reload");
}
</script>
</body>

</html>

　　以上代码让我感觉应该没有问题。可以偏偏在谷歌浏览器下load就是触发不了INPUT的点击事件。折腾一上午，edit函数里换了一种写误打误撞竟然好使了！！！代码如下：
function edit() {
$iframe.attr("src","/Admin/Upload.aspx");
var timer=setInterval(function () {
var contentDocument=$("#ifrmUpload")[0].contentDocument;
if("complete"==contentDocument.readyState) {
$iframe.contents().find("#path").val('/Contract/Attach/<%=row["HTBH"]%>/');
$iframe.contents().find("#file").on("change",function () {
W.$.messager.progress({ "title": "上传附件","text": "正在上传附件…","value": 100,"interval": 0 });
W.$.messager.progress("bar").css("border","none");
})[0].click();
clearInterval(timer);
}
},100);

}

　　到此这文件上传的问题算是解决了。可是在IE11下出现一个奇葩的问题，我想上传文件成功后刷新列表，把上传文件的信息在页面上显示出来，可IE11下给我报"无权调用"。这是什么情况啊……谁来救救我！！！不想了，反正到点吃完了。吃饱了再说。结果，一顿饭后回来调试一下代码，一行代码没有改竟然好使了！！！我有点窃喜，又测试几次感觉应该是没有问题。
　　可以松口气了，完活收工。真不知道，还能在这开发到道路上走多远。我一个老程序员，是不是快要下岗了！！！

wooddy1982

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一下让我感觉头疼的Web文件上传解决办法

　　最近做Web项目用到文件上传，以前没感觉怎么头疼，可能是老了这回怎么地就没做出来，还是翻以前的代码算是好用了。松口气吧！！！测试了几个版本的浏览器，IE8、IE11和谷歌，就IE8没什么问题，这给我郁闷的……　　先说一下我的解决问题的方法，页面加载一个IFRAME，IFRAME里面加载一个页面，页面中实现文件表单提交，通过脚本触发INPUT点击事件，选择文件后触发表单提交完成文件上传。我的代码...
复制链接

扫一扫