利用 jQuery iframe 标签实现无刷新上传

为什么80%的码农都做不了架构师？>>>   

jQuery AJAX 上传插件很多，本文介绍如何通过 jQuery 结合 iframe 标签实现类似 AJAX 的无刷新上传，内容重点在于表单 target 属性和 iframe 上传页面对接 。

上传表单（form）代码

<form id="form4" class="form-inline" action="/user.php?action=home_tweet_upload" target="iframeUpload" method="post" enctype="multipart/form-data">
	<div class="form-group"><input type="file" name="image"></div>
	<button type="submit" class="btn btn-primary">上传</button>
</form>

和普通表单区别在于 enctype="multipart/form-data" ，另外 target="iframeUpload" ，target 指向一个隐藏的 iframe 框架。

iframe 框架代码

<iframe name="iframeUpload" id="iframeUpload" src="/404.html" class="sr-only"></iframe>

Bootstrap 框架中的 sr-only 样式类可以隐藏对象，所以这个框架是不会显示，当上传表单提交时只会刷新 iframeUpload 框架，因为该框架不可见所以用户也不会看到页面被刷新 。

jQuery iframe 无刷新上传如何对接

其实只需要在上传页面写上 javascript 方法 tweetUpload(err, url) ， 然后在表单处理页面输出 window.parent.tweetUpload(1, '图片大小超过限制') 就行了。

PHP 程序页面 user.php?action=home_tweet_upload 中根据上传输出相应文本即可，例如：
<script>window.parent.tweetUpload('0', 'http://www.aowana.com/')</script>
上传成功时 err 为 0，url 为文件地址 。

function tweetUpload (err, url) {
	upload_btn.button('reset');

	if (err == 1) {
		alert(url);
	} else {
		$("#form4 input[type='file']").val(''); // history
		$('#form1image').val(url); // set input
		// qiniu thumbnail
		$('#insertDivImage p.help-block').html('<img src="'+url+'" class="img-thumbnail">');
	}
}

jQuery 结合 iframe 实现无刷新上传功能，关键点在于 form target 属性、隐藏 iframe 、父子框架的脚本对接 。

【爱玩电脑】原创内容转载请注明出处
原文标题：利用 jQuery iframe 标签实现无刷新上传
原文地址：http://www.aowana.com/content.php?id=779

转载于:https://my.oschina.net/4ever/blog/644718