在web開發(fā)中,上傳文件是一個非常常見的功能,而jquery iframe上傳文件則是目前較為普遍的實現(xiàn)方式之一。下面介紹一下這種方式的具體實現(xiàn)方法。
<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data" target="uploadIframe"> <input type="file" name="file"/> <input type="submit" value="上傳"/> </form> <iframe id="uploadIframe" name="uploadIframe" style="display:none;"></iframe>
如上所示,先將要上傳的文件放入一個表單中,然后將表單的target屬性設置為一個隱藏的iframe,這樣表單的信息提交后就會在iframe中展示。
$('#uploadForm').submit(function(){ $(this).ajaxSubmit({ success: function(data){ console.log(data); } }); return false; });
在表單提交時,使用jquery的ajaxSubmit方法,將表單數(shù)據(jù)通過ajax異步提交到服務器。此時服務器返回的數(shù)據(jù)會在iframe中展示,我們通過回調(diào)函數(shù)獲取服務器返回的數(shù)據(jù)。此時我們可以在控制臺中輸出這個返回值,也可以根據(jù)需要進行其他處理。需要注意的是,在回調(diào)函數(shù)中無法使用$(this)來獲取表單,需要使用表單的id或者其他選擇器來獲取。
jquery iframe上傳文件的優(yōu)點是不需要刷新頁面即可完成文件的上傳,適用于較小的文件上傳。但是對于大文件的上傳,不宜使用這種方式,需要通過分片上傳等方法來實現(xiàn)。