溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html中如何實現異步上傳文件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
代碼如下:
<formaction="/hehe"method="post">
<inputtype="text"value="hehe"/>
<inputtype="submit"value="upload"id="upload"/>
</form>
這是html中最常見最簡單的表單提交方式，但是這種方式必須會切換頁面，也許有些時候我們希望可以在同一個頁面與服務器進行交互，并不希望提交完表單后切換到另一個頁面去，怎么辦呢，這里分享幾種表單提交的方式。
首先介紹一種曲線救國的解法，以上的代碼片段不用改變，只要添加以下代碼
<iframeid="uploadFrame"name="uploadFrame"></iframe>
并且在form表單中添加target屬性，target=uploadFrame，target屬性需要與iframe中的id的值一致（或者是name屬性的值，試一試就知道了）。
簡單解釋一下，其實這里我們的表單提交之后也是刷新了，但是為什么沒有跳轉頁面呢，就是因為這個iframe，其實我們刷新在iframe中了，而iframe是空的，也就跟沒有刷新是一樣的了，就給我們一種異步的感覺，這并不是正統的方法，但是也不失為一種曲線救國方式，當然很多情況下這種方式也不適用，比如我們希望提交完成表單后從服務器取回點什么東西，這種方法顯然就不行了，這里我們還需要真正的異步提交表當。
（二）jquery異步提交表單
這里介紹的是jquery的一種提交表單的插件ajaxupload，使用方式也是比較簡單的
<body>
<formaction="/hehe"method="post">
<inputtype="text"value="hehe"/>
<inputtype="button"value="upload"id="upload"/>
<!--<inputtype="button"value="send"onclick="send()"/>-->
</form>
<script>
(function(){
newAjaxUpload("#upload",{
action:'/hehe',
type:"post",
data:{},
name:'textfield',
onSubmit:function(file,ext){
alert("上傳成功");
},
onComplete:function(file,response){
}
});
})();
</script>
</body>
這里貼出了主要的代碼，在頁面渲染完成之后，我們就使用一個自執行的函數給id為upload的按鈕添加異步上傳事件，newAjaxUpload(id,object)中的id對應的就是綁定對象的id，至于第二個參數中介紹一下data是附加的數據,name可以隨意，onSubmit函數是上傳文件之前的回調函數，第一個參數file是文件名，ext是文件的后綴名，至于onComplete函數中可以處理服務器返回的數據。以上是兩種簡單的文件上傳客戶端的實現。
關于“html中如何實現異步上傳文件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
