首先要說的就是 ajax 是無法實現上傳檔案的,可以想一下ajax與後台通訊都是通過傳遞字串,怎麼能傳遞檔案呢?其實出於安全考慮js是不能操作檔案的,所以就不要再說用ajax來實現檔案的上傳了,這是不可能的。
而本文實現的檔案上傳也是無頁面重新整理的,可以說是一種"類似ajax"方法。
開始之前先說兩句無關的,其實在ajax出現之前,web應用也可以是無重新整理的,那時大多通過iframe來做到這一點。當然ajax出現之後,人們一窩蜂地投奔ajax 的陣營了,iframe 就乏人問津了。但是用iframe來實現無重新整理上傳檔案確實乙個很好的選擇。ps:ajax技術基本上可以說是由google公司帶起來的,但少gmail中上傳檔案用的還是 iframe,所以說使用iframe來上傳檔案是最好的選擇。
我在這裡這裡用的技術是jsp,其實asp,php等也是一樣可以這麼實現的
一共兩個檔案就可實現:index.html 和 upload.jsp,在這裡講解一下,文後會附上原始碼
--index.html
html **
index.html 中主要要做的就是寫乙個 form 和 iframe ,並把 form 的 target 設為 iframe 的名字,注意要把 iframe 設為不可見,其他的都是正常的檔案上傳的寫法,這樣重新整理的頁面就是這個隱藏的 iframe ,而在 index.html 中是不會有頁面重新整理的,js的 callback 方法是**方法。用於清空檔案上傳框和顯示後台資訊,注意清空檔案上傳框的方法,和普通方法有點不一樣。
--upload.jsp
jsp **
upload.jsp 中只要注意最後輸出的格式就可以了。其實原理就是輸出一段js**到 iframe 中,然後在iframe中來控制它的父頁面。
ok,至此乙個無重新整理的頁面上傳元件就做好了,
不要忘了在 web-inf/lib 下加上必須的 jspsmartupload.jar 包
。需要說明的是使用iframe來上傳,狀態列還是會有重新整理的,因為iframe 中的頁面重新整理了嘛,但是外部頁面,就是你所看到的頁面是沒有重新整理的,所以也可以說是類似ajax上傳。
無重新整理上傳檔案
這幾天做的專案用到了檔案上傳,總結一下,加深一下印象吧。嘿嘿.1.乙個新增功能,需要上傳,上 1 3 new 427 28 mvc 非同步提交表單,還有檔案上傳時最好加上enctype multipart form data 這個屬性。2.前端觸發事件 jquery 1 上傳 2function b...
jsp 無重新整理上傳檔案
首先要說的就是 ajax 是無法實現上傳檔案的,可以想一下ajax與後台通訊都是通過傳遞字串,怎麼能傳遞檔案呢?其實出於安全考慮js是不能操作檔案的,所以就不要再說用ajax來實現檔案的上傳了,這是不可能的。而本文實現的檔案上傳也是無頁面重新整理的,可以說是一種 類似ajax 方法。開始之前先說兩句...
無重新整理多檔案上傳
csshtml 新增檔案 開始上傳 js var upload function fun upend function data 100,function fuplchange function data divsub name index data.divquere.length x data.d...