需求: 项目要支持大文件上传功能, 经过讨论, 初步将文件上传大小控制在 500M 内, 因此自己需要在项目中进行文件上传部分的调整和配置, 自己将大小都以 501M 来进行限制.
第一步:
前端修改
由于项目使用的是 BJUI 前端框架, 并没有使用框架本身的文件上传控件, 而使用的基于 jQuery 的 Uploadify 文件上传组件, 在项目使用的 jslib 项目中找到了 BJUI 框架集成 jQuery Uploadify 的部分, 这部分代码封装在 bjui-all.JS 文件中,
在 bjui-all.JS 文件中的全局变量定义中有以下部分代码, 这就是定义的有关于上传的 Uploadify 控件的重要变量:
- // 文件上传对象
- functionFileUploader(fileLoc, mgr)
- {
- var_this =this;
- 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;
- }
- varstr = 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;
- varparam = { uid:this.fields["uid"], offset:this.fileSvr.lenSvr, lenSvr:this.fileSvr.lenSvr, perSvr:this.fileSvr.perSvr, id:this.id, time:newDate().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()
- {
- varparam = { uid:this.fields["uid"], id:this.fileSvr.id, time:newDate().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);
- varstr = 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);
- varparam = { md5:this.fileSvr.md5, uid:this.uid, id:this.fileSvr.id, time:newDate().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)
- {
- varmsg ="正在扫描本地文件, 已完成:"+ 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
- varloc_path = encodeURIComponent(this.fileSvr.pathLoc);
- varloc_len =this.fileSvr.lenLoc;
- varloc_size =this.fileSvr.sizeLoc;
- varparam = jQuery.extend({},this.fields,this.Config.bizData, { md5: JSON.md5, id:this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time:newDate().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()
- {
- varobj =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 |
来源: http://www.bubuko.com/infodetail-3294355.html