html中異步上傳文件實作範例分析-html教學-PHP中文網

html中異步上傳文件實作範例分析

高洛峰

發布： 2017-03-07 11:21:13

原創

1009 人瀏覽過

有些時候我們希望可以在同一個頁面與伺服器進行交互，並不希望提交完表單後切換到另一個頁面去，怎麼辦呢，這裡分享幾種表單提交的方式

代碼如下:

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

登入後複製

這是html中最常見最簡單的表單提交方式，但是這種方式必須會切換頁面，也許有些時候我們希望可以在同一個頁面與伺服器進行交互，並不希望提交完表單後切換到另一個頁面去，怎麼辦呢，這裡分享幾種表單提交的方式。
先介紹一種曲線救國的解法，以上的程式碼片段不用改變，只要加入以下程式碼

程式碼如下:

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

登入後複製

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

簡單解釋一下，其實這裡我們的表單提交之後也是刷新了，但是為什麼沒有跳轉頁面呢，就是因為這個iframe，其實我們刷新在iframe中了，而iframe是空的，也就跟沒有刷新是一樣的了，就給我們一種異步的感覺，這並不是正統的方法，但是也不失為一種曲線救國方式，當然很多情況下這種方式也不適用，比如我們希望提交完成表單後從伺服器取回點東西，這種方法顯然就不行了，這裡我們還需要真正的非同步提交表當。

（二）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: &#39;/hehe&#39;, 
type:"post", 
data: {}, 
name: &#39;textfield&#39;, 
onSubmit: function(file, ext) { 
alert("上传成功"); 
}, 
onComplete: function(file, response) { 
} 
}); 
})(); 
</script> 
</body>

登入後複製

這裡貼出了主要的程式碼，在頁面渲染完成之後，我們就使用一個自執行的函數給id為upload的按鈕添加異步上傳事件，new AjaxUpload(id,object )中的id對應的就是綁定物件的id，至於第二個參數中介紹一下data是附加的資料,name可以隨意，onSubmit函數是上傳檔案之前的回呼函數，第一個參數file是檔案名， ext是檔案的後綴名，至於onComplete函數中可以處理伺服器傳回的資料。以上是兩種簡單的文件上傳客戶端的實作。

更多html中非同步上傳檔案實作範例分析相關文章請關注PHP中文網！