您的位置：首页 > Web前端 > JavaScript

一个模拟ajax异步上传文件例子

2015-08-13 11:45 615 查看

众说周知AJAX可以提交表单，但是如果表单里有文件的话ajax就无能为力了。这时就要借助iframe ,简单来说一下几步：

1.首先创建一个iframe 设施name属性为hide_iframe。

2.把设置form表单的target为iframe的name。

3.iframe注册onload事件用作表单提交成功后的回调函数。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>模拟AJAX无刷新上传文件</title>
</head>

<body>
<iframe name="hide_iframe" style="display:none;" onload="loadUserImgURL(this)" ></iframe>
<form id="userimgupload" action="UserinfoAction_upLoadUserImg.action" enctype="multipart/form-data" method="post" target="hide_iframe">
<input type="file" id="userImg" name="userImg" onchange="javascript:uploadImg()"/>
<button>提交</button>
</form>
</body>
<script type="text/javascript">
function loadUserImgURL(iframe){
var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document;
var response;
try{
response = doc.getElementsByTagName("pre")[0].innerHTML;
} catch(err){
response = '';
}
if(response!=''){
var message=JSON.parse(response);
//TODO 业务逻辑
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 表单 javascript

相关文章推荐

新的分享

章节导航