html里怎么完成異步上傳文件
發(fā)表時(shí)間：2024-05-02 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)html里怎樣實(shí)現(xiàn)異步上傳文件，html里實(shí)現(xiàn)異步上傳文件的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。代碼如下:<form action="/hehe" method="post"> <input type="...
這次給大家?guī)?lái)html里怎樣實(shí)現(xiàn)異步上傳文件，html里實(shí)現(xiàn)異步上傳文件的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
代碼如下:
<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="submit" value="upload" id="upload"/>
</form>
這是html中最常見(jiàn)最簡(jiǎn)單的表單提交方式，但是這種方式必須會(huì)切換頁(yè)面，也許有些時(shí)候我們希望可以在同一個(gè)頁(yè)面與服務(wù)器進(jìn)行交互，并不希望提交完表單后切換到另一個(gè)頁(yè)面去，怎么辦呢，這里分享幾種表單提交的方式。
首先介紹一種曲線救國(guó)的解法，以上的代碼片段不用改變，只要添加以下代碼
<iframe id="uploadFrame" name="uploadFrame"></iframe>
并且在form表單中添加target屬性，target=uploadFrame，target屬性需要與iframe中的id的值一致（或者是name屬性的值，試一試就知道了）。
簡(jiǎn)單解釋一下，其實(shí)這里我們的表單提交之后也是刷新了，但是為什么沒(méi)有跳轉(zhuǎn)頁(yè)面呢，就是因?yàn)檫@個(gè)iframe，其實(shí)我們刷新在iframe中了，而iframe是空的，也就跟沒(méi)有刷新是一樣的了，就給我們一種異步的感覺(jué)，這并不是正統(tǒng)的方法，但是也不失為一種曲線救國(guó)方式，當(dāng)然很多情況下這種方式也不適用，比如我們希望提交完成表單后從服務(wù)器取回點(diǎn)什么東西，這種方法顯然就不行了，這里我們還需要真正的異步提交表當(dāng)。
（二）jquery異步提交表單
這里介紹的是jquery的一種提交表單的插件ajaxupload，使用方式也是比較簡(jiǎn)單的
<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>
這里貼出了主要的代碼，在頁(yè)面渲染完成之后，我們就使用一個(gè)自執(zhí)行的函數(shù)給id為upload的按鈕添加異步上傳事件，new AjaxUpload(id,object)中的id對(duì)應(yīng)的就是綁定對(duì)象的id，至于第二個(gè)參數(shù)中介紹一下data是附加的數(shù)據(jù),name可以隨意，onSubmit函數(shù)是上傳文件之前的回調(diào)函數(shù)，第一個(gè)參數(shù)file是文件名，ext是文件的后綴名，至于onComplete函數(shù)中可以處理服務(wù)器返回的數(shù)據(jù)。以上是兩種簡(jiǎn)單的文件上傳客戶端的實(shí)現(xiàn)。
相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
IE網(wǎng)頁(yè)彈出窗口的參數(shù)都有哪些
Div怎樣設(shè)置邊框和透明度樣式
div標(biāo)簽中的元素margin-top失效的解決方法
以上就是html里怎樣實(shí)現(xiàn)異步上傳文件的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
