利用jQuery異步上傳文件的插件用法詳解

更新時(shí)間：2017年07月19日 09:26:51 作者：Myths

這篇文章主要介紹了利用jQuery異步上傳文件的插件用法詳解,需要的朋友可以參考下

現(xiàn)在想實(shí)現(xiàn)用ajax來(lái)上傳文件的功能，但是卻發(fā)現(xiàn)Jquery自帶的ajax方法只能上傳文件名，而不能上傳文件；用form提交雖然能夠上傳文件，但是卻要刷新頁(yè)面。。。多方查找下找到了一個(gè)可用的jQuery插件，剛好可以滿足異步上傳文件的要求。

代碼

jquery.form.js

用法

這個(gè)插件是基于表單提交的，我們只要正常的寫(xiě)一段提交文件的表單，如：

<form id="myForm" action="comment.php" method="post" enctype="multipart/form-data">
  <input type="file" name="name" />
  <input type="submit" value="Submit Comment" />
</form>

然后在js中加上如下代碼：

<html>
<head>
  <script src="jquery.js"></script>
  <script src="jquery.form.js"></script>
  <script>
    $(document).ready(function() {
      $('#myForm').ajaxForm(function(data) {
        alert(data);
      });
    });
  </script>
</head>

這樣就可以監(jiān)聽(tīng)表單的提交事件，把它變成ajax傳送到后臺(tái)，然后將后臺(tái)返回的信息從data中獲取。如此一來(lái)就可以用ajax通信來(lái)傳輸文件了。

以上所述是小編給大家介紹的利用jQuery異步上傳文件的插件用法詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Web前端設(shè)計(jì)模式制作漂亮的彈出層
Ben最近在負(fù)責(zé)一個(gè)購(gòu)書(shū)網(wǎng)站，在網(wǎng)站的首頁(yè)上，有一個(gè)叫做“最新上架”的板塊，板塊的內(nèi)容比較簡(jiǎn)單，只有書(shū)籍名稱，作者姓名和上架時(shí)間（如圖），當(dāng)初設(shè)計(jì)的時(shí)候并i沒(méi)有過(guò)于豐富的構(gòu)思
2010-10-10
改善用戶體驗(yàn)的五款jQuery插件分享
改善網(wǎng)頁(yè)的用戶體驗(yàn)，可以從以下幾個(gè)方面入手：菜單欄，tab，登錄/注冊(cè)，搜索，以及404頁(yè)面。對(duì)于每一方面的優(yōu)化，Gevin分別向大家推薦一個(gè)自己私藏的jquery插件，希望對(duì)大家有幫助，也歡迎大家多多交流
2011-05-05
jQuery 常用代碼集錦(必看篇)
下面小編就為大家?guī)?lái)一篇jQuery 常用代碼集錦(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
需要通過(guò)服務(wù)器端設(shè)置響應(yīng)頭、正確響應(yīng)options請(qǐng)求，正確設(shè)置 JavaScript端需要設(shè)置的headers信息方能實(shí)現(xiàn)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交
本文給大家分享的是使用jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交的代碼，思路非常不錯(cuò)，這里推薦給小伙伴們參考下。
2015-07-07
jquery實(shí)現(xiàn)樓層滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)樓層滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
window.open不被攔截的實(shí)現(xiàn)代碼
打開(kāi)空白新窗口，再給新窗口的localtion賦值，需要的朋友可以參考下
2012-08-08
jquery trigger偽造a標(biāo)簽的click事件取代window.open方法
這篇文章主要介紹了使用jquery trigger 觸發(fā)a標(biāo)簽的click事件取代window.open方法,需要的朋友可以參考下
2014-06-06
jQuery設(shè)置和移除文本框默認(rèn)值的方法
這篇文章主要介紹了jQuery設(shè)置和移除文本框默認(rèn)值的方法,實(shí)例分析了jQuery操作文本框的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery事件委托代碼實(shí)踐詳解
這篇文章主要介紹了jQuery事件委托代碼實(shí)踐詳解，事件委托是利用事件冒泡，只指定一個(gè)事件處理程序來(lái)管理某一類型的所有事件。,需要的朋友可以參考下
2019-06-06