html中異步上傳文件實現

<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" οnclick="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>

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

發佈了35 篇原創文章 · 獲贊 3 · 訪問量 47萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章