基於.net mvc的多圖片上傳預覽保存

1、使用到的技術和操作流程說明

A、使用JavaScriptjquery.net mvc3.0

B、點擊+號按鈕在上傳圖片信息發生變化時,通過異步的ajax請求把圖片信息發送到後臺保存,保存成功後返回圖片的IDurl信息到前臺。進行預覽信息的加載!

C、點擊保存,把頁面上的的圖片IDurl傳遞到後臺,將圖片的信息保存到數據庫,這裏傳遞的參數可以根據需要進行自定義。

2、使用ajax上傳文件(圖片)

A、先封裝了一個 formData 對象,然後使用 post 方法將文件傳給服務器。本來http 協議中沒有上傳文件方面的功能,直到 rfc1867 爲 http 協議添加了這個功能。當然在 rfc1867 中限定 form 的 method 必須爲 POST , enctype = “multipart/form-data” 以及<input type = "file">

 

B、發現在 multipart/form-data 後面有boundary以及一串字符,這是分界符,後面的一堆字符串是隨機生成的,目的是防止上傳文件中出現分界符導致服務器無法正確識別文件起始位置。

 

如果請求的Content-Type設置爲application/x-www-form-urlencoded,那麼這個Post請求被認爲是HTTP POST表單請求,參數出現在Form data 區域。這裏的出現在request payload 的文件信息是因爲請求的content-type = image/jpeg 形式。

Cajax參數contentType 必須設置爲falseajax 中 contentType 設置爲 false 是爲了避免 JQuery 對其操作,從而失去分界符,而使服務器不能正常解析文件。

 

D、後臺接收數據的處理

HttpRequestBase 類接收相關參數,此類用作一些類的基類,這些類使 ASP.NET 可以讀取客戶端在 Web 請求過程中發送的 HTTP 值,這裏是獲取客戶端上傳的文件集合。

 

效果演示:

 

圖片上傳保存預覽

 

 

提交json格式形式數據到後臺

 

 

保存到服務器端的圖片信息:

 

 附件下載地址:

資源下載

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章