利用 jQuery iframe 標籤實現無刷新上傳

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