js大文件上傳(切片)


1、介紹enctype

enctype 屬性規定發送到服務器之前應該如何對表單數據進行編碼。

enctype作用是告知服務器請求正文的MIME類型(請求消息頭content-type的作用一樣)

1、1 enctype的取值有三種

描述

application/x-www-form-urlencoded

在發送前編碼所有字符(默認)

multipart/form-data

不對字符編碼。每一個表單項分割為一個部件

text/plain

空格轉換為 “+” 加號,但不對特殊字符編碼。

1. 當enctype=’application/x-www-form-urlencoded’

2.當enctype=’multipart/form-data’

 

通過觀察發現這個的請求體就發生了變化。這種請求體被稱之為多部件請求體。

什么是多部件請求體:就是把每一個表單項分割為一個部件。

以請求頭的content-type的boundary后面的一串隨機字符串作為分割標識

普通表單項:

//name的意思是文本框里面name的屬性值,而admin是我們輸入的文本值

Content-Disposition: form-data; name="username"

admin

文件表單項

//filename的意思是:我們上傳的文件名稱,content-Type的意思是:MIME類型,asdasdas的意思是:文件里面的內容

Content-Disposition: form-data; name="upload"; filename="a.txt"

Content-Type: text/plain

asdasdas

3. 當enctype=’text/plain’

w3c稱:空格會變成”+”加號,但是我這里沒有發現,只有當get請求的時候,空格會變成”+”號

進入正題

完成上傳需要滿足3個必要的條件

提供form表單,method必須是post,因為get請求的傳輸數據一般為2kb,不同瀏覽器不一樣。

form表單屬性enctype的必須是multipart/form-data

提供input type=”file”類的上傳輸入域

大致實現原理:當enctype的值是multipart/form-data時,瀏覽器會把每個表單項進行分割,分割成不同的部件,以boundary的值為分割標識,這個標識的字符串是隨機生成的,最后一個表單項的分割標識字符串末尾會多兩個”- -“,代表結束。服務端用request.getHeader(“content-type”)獲取分割字符串,然后進行解析。

 

代碼實現

一、開發環境搭建

准備兩個第三方jar包

commons-io包

commons-upload包

所有依賴包

代碼實現

下載的必須條件

兩個頭一個流

content-type

Content-Type是返回消息中非常重要的內容,表示文檔內容屬於什么MIME類型。

瀏覽器會根據Content-Type來決定如何顯示返回的消息體內容。

默認值是text/html

可以使用request.getServletContext().getMimeType(“文件名”)獲取MIME類型。

Content-Disposition

Content-disposition 是 MIME 協議的擴展,MIME 協議指示 MIME 用戶代理如何顯示附加的文件。

默認值是inline,表示在瀏覽器窗口中打開。

服務端向客戶端游覽器發送文件時,如果是瀏覽器支持的文件類型,一般會默認使用瀏覽器打開,比如txt、jpg等,會直接在瀏覽器 中顯示。

如果需要提示用戶保存,利用Content-Disposition進行一下處理,關鍵在於一定要加上attachment。

例如:Content-Disposition:attachment;filename=xxx,瀏覽器就會激活下載框對話框, attachment 表示附件, filname 后面跟隨的是顯示在下載框中的文件名稱。

下載就是向客戶端響應字節數據! 將一個文件變成字節數組, 使用 response.getOutputStream()

來響應給瀏覽器。

代碼如下,此代碼已經實現了斷點續傳功能,用戶在下載過程可以暫停,和繼續下載,對服務器造成的壓力也比較小。

 

加載文件列表,在下載列表中顯示出來

后端代碼邏輯大部分是相同的,目前能夠支持MySQL,Oracle,SQL。在使用前需要配置一下數據庫,可以參考我寫的這篇文章:http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/ 
歡迎入群一起討論“374992201”


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM