使用 js 實現 多表單 無重新整理 上傳檔案

2021-05-24 11:43:01 字數 514 閱讀 7967

對於web,一說到無重新整理,第乙個想到的就是ajax。

不過這次是需要上傳檔案,ajax也無能為力了。。因為ajax是以字串的形式與後台互動的。

本來找了幾個jquery的外掛程式,但是由於這次頁面上有多個form,而這些form也是用ajax動態生成的,

於是像ajaxfileupload、jquery.form這些也都不好使了。。

無意間發現了一篇文章,使用iframe來模擬實現假的無重新整理頁面的提交,原來無重新整理也可以這麼實現。。!

方法概述:

1.在頁面中做乙個隱藏的iframe。

2.將form表單的target指向這個隱藏的iframe。(如果要上傳檔案,只能用post哦~)

3.至於form裡面的內容,是要提交引數還是檔案上傳,該怎麼寫還怎麼寫~

後來又看了看ajaxfileupload,原來也是利用了新建臨時的iframe來實現的~呵呵~

**如下:

於是:縱然是有n個form,那就盡情的target到那個隱藏的iframe中去吧~

js無重新整理上傳檔案

傳統的檔案上傳方式 form action method post enctype multipart form data input type file name file input type submit form 在執行上傳後,頁面會跳轉到action指定的位址。一般使用者需要使用無頁面重新...

jquery實現無重新整理提交表單

使用ajax 設定乙個表單,如 監聽.submit事件,可以在觸發表單提交時的事件,通過return false或者event.preventdefault 來阻止預設的表單提交事件 即 myform submit function e 可以自己封裝不同的js函式來將表單資料轉化成json格式 va...

關於form表單無重新整理提交上傳

1 在當前頁面建乙個 iframe 並隱藏 display none 2 新建的這個 iframe 起個名字,例如 disiframe 3 form 表單的target 屬性設為剛起的這個名字 disiframe 4 提交表單。就是無重新整理了。別的一些效果就靠自己了。想讓頁面看起來的好看,可以在提...