js實現上傳文件夾

本文轉載自查看原文 2019-08-05 18:03 1721 web文件夾上傳/ js上傳整個文件夾/ php 文件分塊上傳/ js實現上傳文件夾/ java文件實現文件的上傳和下載/ webuploader 文件夾上傳/ java web 多級文件上傳/ .net上傳整個文件夾/ java實現文件夾上傳/ java上傳文件夾/ 文件夾多級管理/ Java 自動掃描文件夾發送上傳/ plupload 上傳文件夾/ asp.net上傳大文件/ java 上傳文件夾/ php 上傳文件夾/ 大文件上傳組件/ .net 文件夾上傳

上傳大文件的解決方案

需求：項目要支持大文件上傳功能，經過討論，初步將文件上傳大小控制在500M內，因此自己需要在項目中進行文件上傳部分的調整和配置，自己將大小都以501M來進行限制。

第一步：

前端修改

由於項目使用的是BJUI前端框架，並沒有使用框架本身的文件上傳控件，而使用的基於jQuery的Uploadify文件上傳組件，在項目使用的jslib項目中找到了BJUI框架集成jQuery Uploadify的部分，這部分代碼封裝在bjui-all.js文件中，

在bjui-all.js文件中的全局變量定義中有以下部分代碼，這就是定義的有關於上傳的Uploadify控件的重要變量：

upload:{uploadLimit:5,fileSizeLimit:31744,removeTimeout:0.8}

以上三個變量代表的含義是：

uploadLimit：表示上傳文件個數的限制，5表示文件上傳個數限制是5個

fileSizeLimit：表示上傳文件大小的限制，31744單位是KB，也就是表示31M

removeTimeout：表示移除文件的時間限制

繼續查找使用到這些變量的地方，看到了文件大小超出限制等

了解了BJUI前端框架對於上傳大文件的限制，可以這樣使用，增大文件上傳大小和數量，可以按照如下進行修改，我們在bjui-all.js文件看到uploadLimit屬性和fileSizeLimit屬性的限制，我們在jsp文件中可以這樣進行替換，這里使用的是覆蓋原則，重新定義uploadLimit屬性和fileSizeLimit屬性，覆蓋bjui-all.js文件的默認值設置。

bjui-all.js文件的uploadLimit屬性和fileSizeLimit屬性對應到jsp文件中的屬性就應該這樣寫，data-upload-limit屬性和data-file-size-limit屬性，只需要在后面改寫為data-upload-limit=“800”和data-file-size-limit=“5131264”即可，一定要注意這里的單位是KB，以上數字表示501M。

關於Uploadify控件屬性可以參考這篇文章也可以直接看官網文檔：

https://www.cnblogs.com/yangy608/p/3915349.html

屬性名稱	默認值	說明
auto	true	設置為true當選擇文件后就直接上傳了，為false需要點擊上傳按鈕才上傳。
buttonClass	”	按鈕樣式
buttonCursor	‘hand’	鼠標指針懸停在按鈕上的樣子
buttonImage	null	瀏覽按鈕的圖片的路徑。
buttonText	‘SELECT FILES’	瀏覽按鈕的文本。
checkExisting	false	文件上傳重復性檢查程序，檢查即將上傳的文件在服務器端是否已存在，存在返回1，不存在返回0
debug	false	如果設置為true則表示啟用SWFUpload的調試模式
fileObjName	‘Filedata’	文件上傳對象的名稱，如果命名為’the_files’，PHP程序可以用$_FILES['the_files']來處理上傳的文件對象。
fileSizeLimit	0	上傳文件的大小限制，如果為整數型則表示以KB為單位的大小，如果是字符串，則可以使用(B, KB, MB, or GB)為單位，比如’2MB’；如果設置為0則表示無限制
fileTypeDesc	‘All Files’	這個屬性值必須設置fileTypeExts屬性后才有效，用來設置選擇文件對話框中的提示文本，如設置fileTypeDesc為“請選擇rar doc pdf文件”
fileTypeExts	‘.’	設置可以選擇的文件的類型，格式如：’.doc;.pdf;*.rar’ 。
formData		JSON格式上傳每個文件的同時提交到服務器的額外數據，可在’onUploadStart’事件中使用’settings’方法動態設置。
height	30	設置瀏覽按鈕的高度，默認值
itemTemplate	false	用於設置上傳隊列的HTML模版，可以使用以下標簽： instanceID – Uploadify實例的ID fileID – 列隊中此文件的ID,或者理解為此任務的ID fileName – 文件的名稱 fileSize – 當前上傳文件的大小插入模版標簽時使用格式如：${fileName}
method	Post	提交方式Post或Get
multi	true	設置為true時可以上傳多個文件。
overrideEvents		設置哪些事件可以被重寫，JSON格式，如：’overrideEvents’ : ['onUploadProgress']
preventCaching	true	如果為true，則每次上傳文件時自動加上一串隨機字符串參數，防止URL緩存影響上傳結果
progressData	‘percentage’	設置上傳進度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度
queueID	false	設置上傳隊列容器DOM元素的ID，如果為false則自動生成一個隊列容器。
queueSizeLimit	999	隊列最多顯示的任務數量，如果選擇的文件數量超出此限制，將會出發onSelectError事件。注意此項並非最大文件上傳數量，如果要限制最大上傳文件數量，應設置uploadLimit。
removeCompleted	true	是否自動將已完成任務從隊列中刪除，如果設置為false則會一直保留此任務顯示。
removeTimeout	3	如果設置了任務完成后自動從隊列中移除，則可以規定從完成到被移除的時間間隔。
requeueErrors	false	如果設置為true，則單個任務上傳失敗后將返回錯誤，並重新加入任務隊列上傳。
successTimeout	30	文件上傳成功后服務端應返回成功標志，此項設置返回結果的超時時間
swf	‘uploadify.swf’	uploadify.swf 文件的相對路徑。
uploader	uploadify.php	后台處理程序的相對路徑。
uploadLimit	999	最大上傳文件數量，如果達到或超出此限制將會觸發onUploadError事件。
width	120	設置文件瀏覽按鈕的寬度。

第二步：

后端修改

由於項目后端使用的Spring Boot，本身也就是使用的Spring MVC文件上傳部分，Spring MVC使用的是已經對Servlet文件上傳封裝了的MultipartResolver接口及其相關實現類和一些相關的類，具體的可以看Spring MVC文件上傳源碼部分，認為Spring源碼還是需要讀的，我們只要在Spring Boot啟動類中注入這個Bean，或者自行寫一個WebConfig配置類，注入一些Web相關的Bean即可，這樣Spring Boot啟動就會加載配置類，也需要自己寫攔截器和全局AOP切面，去捕捉文件上傳大小超過限制的異常處理等

基於Spring MVC文件上傳組件MultipartResolver接口（核心），使用其中的CommonsMultipartResolver（實現了MultipartResolver接口）這個實現類，CommonsMultipartResolver中的maxUploadSize屬性是它繼承的抽象父類CommonsFileUploadSupport，這個抽象類其中的一個屬性是FileUpload類，而這個類又繼承自FileUploadBase這個抽象類，其中它的private long sizeMax = -1;就是maxUploadSize屬性的最終設置地方。-1表示文件上傳大小沒有限制，但是我們一般都會設置一個限制值，這里設置的是210763776，這個值的單位是字節，我們將它設置為525336576字節，也就是501M的大小限制。

修改完以上前端和后端，提交修改的代碼到git上即可。

第三步：

Nginx配置

進入到項目部署發布所在的Linux下，進入nginx服務器所安裝的目錄，

進入到nginx服務器所安裝的目錄