web文件夾上傳

時間 2019-11-19

標籤 web 文件夾上傳欄目 HTML 简体版

原文原文鏈接

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

第一步：css

前端修改前端

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

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

//文件上傳對象git

function FileUploader(fileLoc, mgr)ajax

{json

var _this = this;vim

this.id = fileLoc.id;後端

this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,post:null,stop:null }, div: null};

this.isFolder = false; //不是文件夾

this.app = mgr.app;

this.Manager = mgr; //上傳管理器指針

this.event = mgr.event;

this.Config = mgr.Config;

this.fields = jQuery.extend({}, mgr.Config.Fields, fileLoc.fields);//每個對象自帶一個fields幅本

this.State = this.Config.state.None;

this.uid = this.fields.uid;

this.fileSvr = {

pid: ""

, id: ""

, pidRoot: ""

, f_fdTask: false

, f_fdChild: false

, uid: 0

, nameLoc: ""

, nameSvr: ""

, pathLoc: ""

, pathSvr: ""

, pathRel: ""

, md5: ""

, lenLoc: "0"

, sizeLoc: ""

, FilePos: "0"

, lenSvr: "0"

, perSvr: "0%"

, complete: false

, deleted: false

};//json obj，服務器文件信息

this.fileSvr = jQuery.extend(this.fileSvr, fileLoc);

//準備

this.Ready = function ()

{

this.ui.msg.text("正在上傳隊列中等待...");

this.State = this.Config.state.Ready;

this.ui.btn.post.click(function () {

_this.ui.btn.post.hide();

_this.ui.btn.del.hide();

_this.ui.btn.cancel.hide();

_this.ui.btn.stop.show();

if (!_this.Manager.IsPostQueueFull()) {

_this.post();

}

else {

_this.ui.msg.text("正在上傳隊列中等待...");

_this.State = _this.Config.state.Ready;

$.each(_this.ui.btn, function (i, n) { n.hide(); });

_this.ui.btn.del.show();

//添加到隊列

_this.Manager.AppendQueue(_this.fileSvr.id);

}

});

this.ui.btn.stop.click(function () {

_this.stop();

});

this.ui.btn.del.click(function () {

_this.stop();

_this.remove();

});

this.ui.btn.cancel.click(function () {

_this.stop();

_this.remove();

//_this.PostFirst();//

});

};

this.svr_error = function ()

{

alert("服務器返回信息爲空，請檢查服務器配置");

this.ui.msg.text("向服務器發送MD5信息錯誤");

//this.ui.btn.cancel.text("續傳");

this.ui.btn.stop.hide();

this.ui.btn.cancel.show();

};

this.svr_error_same_name = function () {

this.ui.msg.text("服務器存在同名文件");

this.ui.btn.stop.hide();

this.ui.btn.cancel.show();

};

this.svr_create = function (sv)

{

if (sv.value == null)

{

this.Manager.RemoveQueuePost(this.fileSvr.id);

this.svr_error(); return;

}

if (!sv.ret) {

this.Manager.RemoveQueuePost(this.fileSvr.id);

this.svr_error_same_name(); return;

}

var str = decodeURIComponent(sv.value);//

this.fileSvr = JSON.parse(str);//

//服務器已存在相同文件，且已上傳完成

if (this.fileSvr.complete)

{

this.post_complete_quick();

} //服務器文件沒有上傳完成

else

{

this.ui.process.css("width", this.fileSvr.perSvr);

this.ui.percent.text(this.fileSvr.perSvr);

this.post_file();

}

};

this.svr_update = function () {

if (this.fileSvr.lenSvr == 0) return;

var param = { uid: this.fields["uid"], offset: this.fileSvr.lenSvr, lenSvr: this.fileSvr.lenSvr, perSvr: this.fileSvr.perSvr, id: this.id, time: new Date().getTime() };

$.ajax({

type: "GET"

, dataType: 'jsonp'

, jsonp: "callback"//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名

, url: this.Config["UrlProcess"]

, data: param

, success: function (msg) {}

, error: function (req, txt, err) { alert("更新文件進度錯誤！" + req.responseText); }

, complete: function (req, sta) { req = null; }

});

};

this.svr_remove = function ()

{

var param = { uid: this.fields["uid"], id: this.fileSvr.id, time: new Date().getTime() };

$.ajax({

type: "GET"

, dataType: 'jsonp'

, jsonp: "callback"//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名

, url: this.Config["UrlDel"]

, data: param

, success: function (msg) { }

, error: function (req, txt, err) { alert("刪除文件失敗！" + req.responseText); }

, complete: function (req, sta) { req = null; }

});

};

this.post_process = function (json)

{

this.fileSvr.lenSvr = json.lenSvr;//保存上傳進度

this.fileSvr.perSvr = json.percent;

this.ui.percent.text("("+json.percent+")");

this.ui.process.css("width", json.percent);

var str = json.lenPost + " " + json.speed + " " + json.time;

this.ui.msg.text(str);

};

this.post_complete = function (json)

{

this.fileSvr.perSvr = "100%";

this.fileSvr.complete = true;

$.each(this.ui.btn, function (i, n)

{

n.hide();

});

this.ui.process.css("width", "100%");

this.ui.percent.text("(100%)");

this.ui.msg.text("上傳完成");

this.Manager.arrFilesComplete.push(this);

this.State = this.Config.state.Complete;

//從上傳列表中刪除

this.Manager.RemoveQueuePost(this.fileSvr.id);

//從未上傳列表中刪除

this.Manager.RemoveQueueWait(this.fileSvr.id);

var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };

$.ajax({

type: "GET"

, dataType: 'jsonp'

, jsonp: "callback"//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名

, url: _this.Config["UrlComplete"]

, data: param

, success: function (msg)

{

_this.event.fileComplete(_this);//觸發事件

_this.post_next();

}

, error: function (req, txt, err) { alert("文件-向服務器發送Complete信息錯誤！" + req.responseText); }

, complete: function (req, sta) { req = null; }

});

};

this.post_complete_quick = function ()

{

this.fileSvr.perSvr = "100%";

this.fileSvr.complete = true;

this.ui.btn.stop.hide();

this.ui.process.css("width", "100%");

this.ui.percent.text("(100%)");

this.ui.msg.text("服務器存在相同文件，快速上傳成功。");

this.Manager.arrFilesComplete.push(this);

this.State = this.Config.state.Complete;

//從上傳列表中刪除

this.Manager.RemoveQueuePost(this.fileSvr.id);

//從未上傳列表中刪除

this.Manager.RemoveQueueWait(this.fileSvr.id);

//添加到文件列表

this.post_next();

this.event.fileComplete(this);//觸發事件

};

this.post_stoped = function (json)

{

this.ui.btn.post.show();

this.ui.btn.del.show();

this.ui.btn.cancel.hide();

this.ui.btn.stop.hide();

this.ui.msg.text("傳輸已中止....");

if (this.Config.state.Ready == this.State)

{

this.Manager.RemoveQueue(this.fileSvr.id);

this.post_next();

return;

}

this.State = this.Config.state.Stop;

//從上傳列表中刪除

this.Manager.RemoveQueuePost(this.fileSvr.id);

this.Manager.AppendQueueWait(this.fileSvr.id);//添加到未上傳列表

//傳輸下一個

this.post_next();

};

this.post_error = function (json)

{

this.svr_update();

this.ui.msg.text(this.Config.errCode[json.value]);

this.ui.btn.stop.hide();

this.ui.btn.post.show();

this.ui.btn.del.show();

this.State = this.Config.state.Error;

//從上傳列表中刪除

this.Manager.RemoveQueuePost(this.fileSvr.id);

//添加到未上傳列表

this.Manager.AppendQueueWait(this.fileSvr.id);

this.post_next();

};

this.md5_process = function (json)

{

var msg = "正在掃描本地文件，已完成：" + json.percent;

this.ui.msg.text(msg);

};

this.md5_complete = function (json)

{

this.fileSvr.md5 = json.md5;

this.ui.msg.text("MD5計算完畢，開始鏈接服務器...");

this.event.md5Complete(this, json.md5);//biz event

var loc_path = encodeURIComponent(this.fileSvr.pathLoc);

var loc_len = this.fileSvr.lenLoc;

var loc_size = this.fileSvr.sizeLoc;

var param = jQuery.extend({}, this.fields, this.Config.bizData, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });

$.ajax({

type: "GET"

, dataType: 'jsonp'

, jsonp: "callback"//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名

, url: this.Config["UrlCreate"]

, data: param

, success: function (sv)

{

_this.svr_create(sv);

}

, error: function (req, txt, err)

{

_this.Manager.RemoveQueuePost(_this.fileSvr.id);

alert("向服務器發送MD5信息錯誤！" + req.responseText);

_this.ui.msg.text("向服務器發送MD5信息錯誤");

_this.ui.btn.cancel.show();

_this.ui.btn.stop.hide();

}

, complete: function (req, sta) { req = null; }

});

};

this.md5_error = function (json)

{

this.ui.msg.text(this.Config.errCode[json.value]);

//文件大小超過限制,文件大小爲0

if ("4" == json.value

|| "5" == json.value)

{

this.ui.btn.stop.hide();

this.ui.btn.cancel.show();

}

else

{

this.ui.btn.post.show();

this.ui.btn.stop.hide();

}

this.State = this.Config.state.Error;

//從上傳列表中刪除

this.Manager.RemoveQueuePost(this.fileSvr.id);

//添加到未上傳列表

this.Manager.AppendQueueWait(this.fileSvr.id);

this.post_next();

};

this.post_next = function ()

{

var obj = this;

setTimeout(function () { obj.Manager.PostNext(); }, 300);

};

this.post = function ()

{

this.Manager.AppendQueuePost(this.fileSvr.id);

this.Manager.RemoveQueueWait(this.fileSvr.id);

if (this.fileSvr.md5.length > 0 || this.fileSvr.lenSvr > 0)

{

this.post_file();

}

else

{

this.check_file();

}

};

this.post_file = function ()

{

$.each(this.ui.btn, function (i, n) { n.hide();});

this.ui.btn.stop.show();

this.State = this.Config.state.Posting;//

this.app.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });

};

this.check_file = function ()

{

//this.ui.btn.cancel.text("中止").show();

this.ui.btn.stop.show();

this.ui.btn.cancel.hide();

this.State = this.Config.state.MD5Working;

this.app.checkFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc });

};

this.stop = function ()

{

$.each(this.ui.btn, function (i, n) { n.hide();});

this.svr_update();

this.app.stopFile({ id: this.fileSvr.id });

};

//手動中止，通常在StopAll中調用

this.stop_manual = function ()

{

if (this.Config.state.Posting == this.State)

{

this.svr_update();

this.ui.btn.post.show();

this.ui.btn.stop.hide();

this.ui.btn.cancel.hide();

this.ui.msg.text("傳輸已中止....");

this.app.stopFile({ id: this.fileSvr.id ,tip:false});

this.State = this.Config.state.Stop;

}

};

//刪除，通常在用戶點擊"刪除"按鈕時調用

this.remove = function ()

{

this.Manager.del_file(this.fileSvr.id);

this.app.delFile(this.fileSvr);

this.ui.div.remove();

if (this.State != this.Config.state.Complete) this.svr_remove();

};

}

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控件屬性能夠參考這篇文章也能夠直接看官網文檔：

http://blog.ncmem.com/wordpress/2019/08/07/java超大文件上傳與下載/

屬性名稱	默認值	說明
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服務器所安裝的目錄

進入到nginx服務器目錄下的conf目錄

查看nginx.conf配置文件內容中的client_max_body_size配置的大小，這裏設置的是300M。

使用vi或者vim打開nginx.conf配置文件，修改client_max_body_size的大小爲501M，保存便可

進入到nginx服務器下的sbin目錄下，咱們使用./nginx -t查看配置文件是否成功使用，而後使用./nginx -s reload重啓Nginx服務器便可。

第四步：

Tomcat配置

因爲項目使用的是Spring Cloud，天然使用Spring Boot，咱們這個項目仍是使用外置的Tomcat做爲他的服務器，便於咱們對Tomcat服務器進行優化和設置。