html里如何實(shí)現(xiàn)異步上傳文件

發(fā)布時(shí)間：2020-09-29 17:12:28 來源：億速云閱讀：174 作者：小新欄目：web開發(fā)

html里如何實(shí)現(xiàn)異步上傳文件？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

代碼如下:

<form action="/hehe" method="post"> 
<input type="text" value="hehe"/> 
<input type="submit" value="upload" id="upload"/> 
</form>

這是html中最常見最簡單的表單提交方式，但是這種方式必須會(huì)切換頁面，也許有些時(shí)候我們希望可以在同一個(gè)頁面與服務(wù)器進(jìn)行交互，并不希望提交完表單后切換到另一個(gè)頁面去，怎么辦呢，這里分享幾種表單提交的方式。
首先介紹一種曲線救國的解法，以上的代碼片段不用改變，只要添加以下代碼

<iframe id="uploadFrame" name="uploadFrame"></iframe>

并且在form表單中添加target屬性，target=uploadFrame，target屬性需要與iframe中的id的值一致（或者是name屬性的值，試一試就知道了）。

簡單解釋一下，其實(shí)這里我們的表單提交之后也是刷新了，但是為什么沒有跳轉(zhuǎn)頁面呢，就是因?yàn)檫@個(gè)iframe，其實(shí)我們刷新在iframe中了，而iframe是空的，也就跟沒有刷新是一樣的了，就給我們一種異步的感覺，這并不是正統(tǒng)的方法，但是也不失為一種曲線救國方式，當(dāng)然很多情況下這種方式也不適用，比如我們希望提交完成表單后從服務(wù)器取回點(diǎn)什么東西，這種方法顯然就不行了，這里我們還需要真正的異步提交表當(dāng)。

（二）jquery異步提交表單

這里介紹的是jquery的一種提交表單的插件ajaxupload，使用方式也是比較簡單的

<body> 
<form action="/hehe" method="post"> 
<input type="text" value="hehe"/> 
<input type="button" value="upload" id="upload"/> 
<!--<input type="button" value="send" onclick="send()"/>--> 
</form> 
<script> 
(function(){ 
new AjaxUpload("#upload", { 
action: '/hehe', 
type:"post", 
data: {}, 
name: 'textfield', 
onSubmit: function(file, ext) { 
alert("上傳成功"); 
}, 
onComplete: function(file, response) { 
} 
}); 
})(); 
</script> 
</body>

這里貼出了主要的代碼，在頁面渲染完成之后，我們就使用一個(gè)自執(zhí)行的函數(shù)給id為upload的按鈕添加異步上傳事件，new AjaxUpload(id,object)中的id對應(yīng)的就是綁定對象的id，至于第二個(gè)參數(shù)中介紹一下data是附加的數(shù)據(jù),name可以隨意，onSubmit函數(shù)是上傳文件之前的回調(diào)函數(shù)，第一個(gè)參數(shù)file是文件名，ext是文件的后綴名，至于onComplete函數(shù)中可以處理服務(wù)器返回的數(shù)據(jù)。以上是兩種簡單的文件上傳客戶端的實(shí)現(xiàn)。

感謝各位的閱讀！看完上述內(nèi)容，你們對html里如何實(shí)現(xiàn)異步上傳文件大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

html里如何實(shí)現(xiàn)異步上傳文件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽