聊一聊jquery檔案上傳(支援多檔案上傳)

2022-01-23 22:00:22 字數 2482 閱讀 2703

談到檔案上傳,現在一般都用現成的元件可以使用。pc端的可以使用uploadify。針對微**h5也有uploadifive。但是這元件並不能滿足各種場景的需求,例如:預覽 切圖 放大縮小,取消之類的。

html:

服務端:

}後端**沒什麼不同的,一直就是如此

主要是前端html,我標記為紅色字型的屬性乙個都不能少,少乙個都不可能完成上傳

action

作用:該屬性的值指向要提交到某乙個頁面,缺少它會不知道提交給誰

可以提交的頁面:abc.aspx abc.ashx mvc的控制器方法 webapi介面 以及其他後端處理程式

name

input file 裡面必須包含name屬性才能夠將檔案傳遞到伺服器,具體原因不知道,有興趣的可以嘗試下如果有知道的麻煩解惑

相信到了這裡你一定可以完成上傳檔案操作了!

相信大家都不願意讓人什麼型別的檔案都往伺服器上傳,萬一是病毒或者指令碼之類的就麻煩大了。於是就開始了對檔案的型別限制

accept

作用:就是用來做條件篩選的

取值範圍:

類  image/gif   image/jpeg  image/png .. 多個型別之間用,隔開 如accept="image/gif, image/jpeg"

文件類  

css  text/css

多**類

*** audio/mpeg

mp4 audio/mp4  video/mp4

使用事例

"

file1

" name="

fileupload

"accept="image/gif, image/jpeg" type="

file

" value="" />

更多型別詳情請參考

有了檔案型別限制後 有覺得可以多選是件多麼愜意的事情。憑什麼桌面應用可以web就不可以。事實證明 當然可以 而且很簡單

multiple="multiple"

在input file 標籤中加入multiple="multiple"屬性 就能愉快的多選檔案了

現在最新的html**應該是這個樣子了

來看看效果吧

現在的功能已經可以滿足上傳基本需求了,但是事情完了嗎?遠遠沒有 因為需求就像是程式設計師的天敵,就是乙個字 "改"!這個能做成類似xx介面嗎?我覺得介面還可以再改改...

大多時候我們需要上傳檔案成功後知道檔案的位址或者是檔案大小等資料,但是現在可能真沒辦法處理,因為現在上傳成功後是這個樣子的

尼瑪 這是什麼鬼。雖然我伺服器端上傳成功後確實是要返回檔案路徑和狀態,現在也確實返回了 但是咱能不能不要這麼赤裸裸的顯示在頁面上?還有,之前上傳的頁面去哪了???

經過一番改造之後 html**如下

15

6

執行結果

從列印結果可以看到,多檔案上傳已經成功 並且能夠做邏輯控制了

這裡有2點必須特別說明

1.jquery版本

從第15行html**可以看到

var formdata = new formdata($("#uploadform")[0]);

data傳遞過去的引數是formdata 但是formdata這個類是jquery版本比較高的檔案中才會有 所以我這裡引用的是jquery1.83 之前asp.net mvc模板預設給我安裝的是jquery1.10.2的版本,是不支援的

2.$("form").serialize()

之前也檢視網上資料 都推薦用它來上傳檔案,於是就寫成了這樣

$.ajax().success(function (data)  

else

}).error(function (data) );

});

但是後台一直沒有接收到檔案,然後經過一番努力搜尋資料翻答案,原來檔案無法被serialize()序列化,最後推薦用formdata

啥也不說了 奉上**

picshow

" width="

200" height="

200" src="" />

這次檔案上傳就講到這裡吧。沒有什麼原理性和有深度的東西,就是教程。原諒才疏學淺,後面會越來越好的。

聊一聊小甜餅

cookies程式設計 cookie是儲存在客戶端的小文字,儲存的位置分為兩種 cookie可能儲存在客戶端瀏覽器的所佔記憶體中,關閉瀏覽器後,cookies就不再存在。cookie也可能儲存在客戶pc機的硬碟上,設定有效時間,超過有效時間後失效。cookie的常見應用 簡化登入 很多 在登入時,可...

聊一聊動態規劃

一 問題 看乙個經常被引用的問題 例子1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 例子2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 問你例子1是多少時,你乙個個算後,結果是20 接著問你例子2時,你會馬上說出21,為什...

聊一聊元資料

這個話題來自我的msn space。這是原文 元資料 metadata 這個詞現在到處氾濫。其實我對元資料充其量只能說有自己的理解而已,並不能確信這個理解是正確的。我認為,資料結構分為三個層次 uml可是四層哦 例項層 直接描述特異化的資料場景 元資料層 描述例項的結構的一組資料 元資料的元資料層 ...