详解Ajax和form+iframe 实现文件上传的方法(两种方式)

form表单提交到iframe

html代码:

<iframe name="demoIframe" style="display:none"></iframe>
<form target="demoIframe" action="upload.php" method="post" enctype="multipart/form-data">
<input class="filename" type="file" name="fileLabel">
<input type="submit" value="提交">
</form> 

我们点击提交,可以看到下面的请求：

已经把文件上传。那么，加入这个upload.php接口可用，而且假如上传成功后，会返回：

{
"code": "200",
"success": true,
"data": {
...
}
} 

我们要怎么去获取返回值，从而进行下一步的操作呢？因为我们是上传到了iframe中，所以我们只需要监听iframe的load事件，如果有返回值了，我们就能获取到，从而进行进一步处理。看js代码：

$('iframe').on('load', function() {
var responseText = $('iframe')[0].contentDocument.body.textContent;
var responseData = JSON.parse(responseText) || {};
if (responseData.isSuccess == true || responseData.code == 200) {
//success
} else {
//error 
}
});

这样我们就完成了一个支持所有浏览器的上传文件操作了。在此小编非常感谢大家对易采站长站网站的支持！