jsp+上传组件+文件夹+文件
一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了。我这里分享一下我自己开发的一套大文件上传控件供大家参考
这是前端代码：
<body>
<div id="app">
{{ message }}
<http-uploader6></http-uploader6>
</div>
<script type="text/javascript">
// 定义一个名为 button-counter 的新组件
Vue.component('http-uploader6', {
data() {
return {
upApp: null
}
},
mounted() {
//初始化up6
const _this = this;
this.upApp = new HttpUploaderMgr();
this.upApp.load_to("up6-div");
},
destoryed() {
//this.editor.destory();
},
methods: {
open_file: function () { this.upApp.openFile(); }
, open_folder: function () { this.upApp.openFolder(); }
},
template: '<div id="up6-div"></div>'
});
var app = new Vue({
el: '#app',
data: {
message: '演示up6如何在vue中使用'
}
});
</script>
</body>
这是前台报错截图：
上传部分JS代码：
function FolderUploader(fdLoc, mgr)
{
var _this = this;
this.ui = { msg: null, process: null, percent: null, btn: { del: null, cancel: null,stop:null,post:null }, div: null, split: null };
this.isFolder = true; //是文件夹
this.folderInit = false;//文件夹已初始化
this.folderScan = false;//已经扫描
this.folderSvr = { nameLoc: "",initLoc:false,nameSvr:"",lenLoc:0,sizeLoc: "0byte", lenSvr: 0,perSvr:"0%", id: "", uid: 0, foldersCount: 0, filesCount: 0, filesComplete: 0, pathLoc: "", pathSvr: "", pathRel: "", pidRoot: 0, complete: false, folders: [], files: [] };
jQuery.extend(true,this.folderSvr, fdLoc);//续传信息
this.manager = mgr;
this.event = mgr.event;
this.arrFiles = new Array(); //子文件列表(未上传文件列表)，存HttpUploader对象
this.FileListMgr = mgr.FileListMgr;//文件列表管理器
this.Config = mgr.Config;
this.fields = jQuery.extend({}, mgr.Config.Fields);//每一个对象自带一个fields幅本
this.app = mgr.app;
this.LocalFile = ""; //判断是否存在相同项
this.FileName = "";
//准备
this.Ready = function ()
{
this.ui.msg.text("正在上传队列中等待...");
this.State = this.Config.state.Ready;
};
this.svr_create = function ()
{
this.ui.btn.stop.show();
this.ui.btn.cancel.hide();
this.ui.btn.post.hide();
this.ui.btn.del.hide();
this.folderInit = true;
this.folderSvr.initLoc = true;//
this.post_fd();
};
this.svr_create_err = function ()
{
this.folderInit = false;
this.ui.msg.text("向服务器发送文件夹信息错误").css("cursor", "pointer").click(function ()
{
});
this.ui.btn.post.show();
this.ui.btn.stop.hide();
this.ui.btn.del.show();
};
this.svr_update = function ()
{
var param = jQuery.extend({}, this.fields, { uid: this.folderSvr.uid, id: this.folderSvr.id, lenSvr: this.folderSvr.lenSvr, perSvr: this.folderSvr.perSvr, time: new Date().getTime() });
$.ajax({
type: "GET"
, dataType: 'jsonp'
, jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
, url: this.Config["UrlUpdate"]
, data: param
, success: function (sv) { }
, error: function (req, txt, err) { }
, complete: function (req, sta) { req = null; }
});
};
this.scan = function ()
{
this.ui.btn.stop.hide();
this.ui.btn.del.hide();
this.ui.btn.cancel.show();
this.app.scanFolder(this.folderSvr);
};
//上传，创建文件夹结构信息
this.post = function ()
{
if (!this.folderScan) { this.scan(); return; }
this.ui.btn.stop.show();
this.ui.btn.del.hide();
this.ui.btn.cancel.hide();
this.ui.btn.post.hide();
this.manager.AppendQueuePost(this.folderSvr.id);//添加到队列中
this.State = this.Config.state.Posting;
//如果文件夹已初始化，表示续传。
if (this.folderInit)
{
this.post_fd();
}
else
{
if (!this.check_opened()) return;
//在此处增加服务器验证代码。
this.ui.msg.text("初始化...");
var loc_path = encodeURIComponent(this.folderSvr.pathLoc);
var f_data = jQuery.extend({}, this.fields, {
nameLoc: this.folderSvr.nameLoc
, pathLoc: loc_path
, id: this.folderSvr.id
, lenLoc: this.folderSvr.lenLoc
, sizeLoc: this.folderSvr.sizeLoc
, filesCount: this.folderSvr.filesCount
, uid: this.folderSvr.uid
, time: new Date().getTime()
});
$.ajax({
type: "GET"
, dataType: 'jsonp'
, jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
, url: this.Config["UrlFdCreate"]
, data: f_data
, success: function (msg)
{
var str = decodeURIComponent(msg.value);
var fv = JSON.parse(str);
_this.folderSvr.pathSvr = fv.pathSvr;
_this.svr_create();
}
, error: function (req, txt, err)
{
alert("向服务器发送文件夹信息错误！" + req.responseText);
_this.svr_create_err();
}
, complete: function (req, sta) { req = null; }
});
return;
}
};
this.check_opened = function ()
{
if (this.folderSvr.files == null) return false;
for (var i = 0, l = this.folderSvr.files.length; i < l; ++i)
{
var f = this.folderSvr.files[i];
if (f.opened)
{
this.ui.btn.del.show();
this.ui.btn.stop.hide();
this.manager.RemoveQueuePost(this.folderSvr.id);//从上传队列中删除
this.ui.msg.text("文件被占用，请关闭后重选文件夹：" + f.pathLoc);
return false;
}
}
return true;
};
this.check_fd = function ()
{
this.ui.btn.stop.show();
this.ui.btn.post.hide();
this.State = this.Config.state.MD5Working;
this.app.checkFolder(this.folderSvr);
};
this.post_fd = function ()
{
this.ui.btn.stop.show();
this.ui.btn.post.hide();
this.State = this.Config.state.Posting;
this.app.postFolder(jQuery.extend({}, this.folderSvr, { fields: this.fields }));
};
this.post_error = function (json)
{
if (json.code == "6") {
this.ui.msg.text(this.Config.errCode[json.code] + ":" + json.pathLoc);
}
else
{
this.ui.msg.text(this.Config.errCode[json.code]);
}
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.folderSvr.id);
//添加到未上传列表
this.manager.AppendQueueWait(this.folderSvr.id);
this.svr_update();//
setTimeout(function () { _this.manager.PostNext(); }, 500);
if (this.Config.AutoConnect.opened) {
setTimeout(function () {
if (_this.State == _this.Config.state.Posting) return;
_this.post();
}, this.Config.AutoConnect.time);
}
};
this.post_stoped = function (json)
{
this.ui.msg.text("传输已停止....");
this.ui.btn.stop.hide();
this.ui.btn.post.show();
this.ui.btn.del.show();
this.State = this.Config.state.Stop;
//从上传列表中删除
this.manager.RemoveQueuePost(this.folderSvr.id);
//添加到未上传列表
this.manager.AppendQueueWait(this.folderSvr.id);
};
this.post_process = function (json)
{
if (this.State == this.Config.state.Stop) return;
this.folderSvr.lenSvr = json.lenSvr;
this.folderSvr.perSvr = json.percent;
this.ui.percent.text("("+json.percent+")");
this.ui.process.css("width", json.percent);
var str = "(" + json.fileCmps + "/" + json.fileCount + ") " + json.lenPost + " " + json.speed + " " + json.time;
this.ui.msg.text(str);
};
this.post_complete = function (json)
{
if (!json.all)
{
//this.folderSvr.files[json.id_f].complete = true;
//this.folderSvr.filesComplete = json.compCount;//
return;
}
this.event.fdComplete(this);
$.each(this.ui.btn, function (i, n)
{
n.hide();
});
this.ui.process.css("width", "100%");
this.ui.percent.text("(100%)");
//obj.pMsg.text("上传完成");
this.State = this.Config.state.Complete;
this.folderSvr.complete = true;
this.folderSvr.perSvr = "100%";
//从上传列表中删除
this.manager.RemoveQueuePost(this.folderSvr.id);
//从未上传列表中删除
this.manager.RemoveQueueWait(this.folderSvr.id);
var str = "文件数：" + json.fileCount + "，成功：" + json.compCount;
if (json.errorCount > 0) str += " 失败：" + json.errorCount
this.ui.msg.text(str);
$.ajax({
type: "GET"
, dataType: 'jsonp'
, jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
, url: this.Config["UrlFdComplete"]
, data: { uid: this.fields["uid"], id: this.folderSvr.id, merge: this.Config.AutoMerge, time: new Date().getTime() }
, success: function (msg)
{
//添加到文件列表
_this.FileListMgr.UploadComplete(_this.folderSvr);
_this.manager.PostNext();
}
, error: function (req, txt, err) { alert("向服务器发送文件夹Complete信息错误！" + req.responseText); }
, complete: function (req, sta) { req = null; }
});
};
this.md5_error = function (json)
{
this.ui.btn.post.show();
this.ui.btn.cancel.hide();
};
this.md5_process = function (json)
{
if (this.State == this.Config.state.Stop) return;
this.ui.msg.text(json.percent);
};
this.md5_complete = function (json)
{
//单个文件计算完毕
if (!json.all)
{
this.folderSvr.files[json.id_f].md5 = json.md5;
return;
}
//在此处增加服务器验证代码。
this.ui.msg.text("初始化...");
var f_data = jQuery.extend({},this.fields,{folder: encodeURIComponent(JSON.stringify(this.folderSvr)), time: new Date().getTime()});
$.ajax({
type: "POST"
//, dataType: 'jsonp'
//, jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
, url: this.Config["UrlFdCreate"]
, data: f_data
, success: function (msg)
{
try
{
var json = JSON.parse(decodeURIComponent(msg));
_this.svr_create(json);
}
catch(e)
{
_this.post_error({"value":"7"});
}
}
, error: function (req, txt, err)
{
alert("向服务器发送文件夹信息错误！" + req.responseText);
_this.svr_create_err();
}
, complete: function (req, sta) { req = null; }
});
};
this.scan_process = function (json)
{
this.ui.size.text(json.sizeLoc);
this.ui.msg.text("已扫描:"+json.fileCount);
};
this.scan_complete = function (json)
{
this.ui.msg.text("扫描完毕，开始上传...");
this.ui.size.text(json.sizeLoc);
jQuery.extend(this.folderSvr, json);
this.folderScan = true;
setTimeout(function () {
_this.post();
}, 1000);
};
//一般在StopAll()中调用
this.stop_manual = function ()
{
this.svr_update();
this.app.stopFile({ id: this.folderSvr.id,tip:false });
this.State = this.Config.state.Stop;
};
//手动点击“停止”按钮时
this.stop = function ()
{
this.svr_update();//
this.ui.btn.post.hide();
this.ui.btn.stop.hide();
this.ui.btn.cancel.hide();
this.State = this.Config.state.Stop;
if (this.Config.state.Ready == this.State)
{
this.ui.btn.cancel.text("续传").show;
this.ui.msg.text("传输已停止....");
this.ui.btn.del.show();
this.manager.RemoveQueue(this.folderSvr.id);
this.manager.AppendQueueWait(this.folderSvr.id);//添加到未上传列表
this.post_next();
return;
}
//
this.app.stopFile({ id: this.folderSvr.id });
this.manager.RemoveQueuePost(this.folderSvr.id);
this.manager.AppendQueueWait(this.folderSvr.id);
};
//从上传列表中删除上传任务
this.remove = function ()
{
//清除缓存
this.app.delFolder({ id: this.folderSvr.id });
this.manager.Delete(this.folderSvr.id);
this.ui.div.remove();
this.ui.split.remove();
};
}
这是后台部分代码文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@
page contentType="text/html;charset=UTF-8"%><%@
page import="java.net.URLDecoder" %><%@
page import="up7.*" %><%@
page import="java.sql.*" %><%@
page import="net.sf.json.JSONArray" %><%@
page import="net.sf.json.JSONObject" %><%@
page import="net.sf.json.util.JSONUtils" %><%@
page import="com.google.gson.Gson" %><%@
page import="com.google.gson.GsonBuilder" %><%@
page import="com.google.gson.annotations.SerializedName" %><%@
page import="org.apache.commons.fileupload.*" %><%@
page import="org.apache.commons.fileupload.disk.*" %><%@
page import="org.apache.commons.fileupload.servlet.*" %><%@
page import="java.io.*" %><%
/*
此页面主要用来向数据库添加一条记录。
一般在 HttpUploader.js HttpUploader_MD5_Complete(obj) 中调用
更新记录：
2012-05-24 完善
2012-06-29 增加创建文件逻辑，
*/
XDebug.Output("测试5");
try
{
DbHelper db = new DbHelper();
String sql = "{call fd_files_check(?)}";
CallableStatement cmd = db.GetCommandStored(sql);
cmd.setString(1, "f27a549a9d87eb927c35a9b09ef0dc0a");
ResultSet rs = cmd.executeQuery();
while(rs.next())
{
out.write(rs.getString("f_nameLoc"));
}
rs.close();
cmd.close();
} catch (SQLException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
%>
文件和文件夹批量上传
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
上传成功后打开我们的存储文件夹查看，发现自动生成了几个文件夹，打开文件夹确认上传文件成功
文件及文件夹批量下载
首先勾选多个上传的文件或文件夹，你会发现多了一个下载按钮
然后点击下载按钮，设置下载目录文件夹
设置完成后继续点击下载按钮，页面的右下角出现了下载面板，你选择的文件已出现在目录中，然后点击全部下载，或者单个点击继续，自动加载未上传完的任务。在刷新浏览器或重启电脑后任然可以自动加载未完成的任务
下载完成后打开我们设置的下载目录文件夹，发现需下载的文件或文件夹确认已下载成功，经确认文件夹内的内容与下载文件夹内容一致
数据库记录
产品介绍官网：https://dwz.cn/fgXtRtnu