webUpload组件实现文件上传功能和下载功能
一、上传功能
首先引用基于jquery的百度上传组件webuploader（webuploader.css，webuploader.js）(jquery版本要求>1.10，webuploader版本：0.1.5)，下载链接：http://www.jq22.com/jquery-info2665
<link rel="stylesheet" type="text/css" href="webuploader.css"/>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="webuploader.js"></script>
创建初始化方法，初始化webuploader插件对象(可以写在一个js文件中，外部js文件引用即可)
//初始化方法
//id：上传文件关联数据id(可选)，successCallBack：外部调用的上传函数，fileType：文件类型
function initUpload(id,successCallBack){
var fileType;
var dhtml = '';
dhtml += '<div>';
dhtml += '<table id="file-list" class="table table-bordered"><tr><th width="130px">文件名称</th><th>文件大小</th><th>上传进度</th></tr></table>';
dhtml += '<div class="btn btn-primary" id="select-file">选择文件</div><div style="margin-left:10px" class="btn btn-primary" id="start-upload">开始上传</div>';
dhtml += '</div>';
//点击上传跳出的弹窗
var d = dialog({
title: '文件上传',
width: 360,
//加载标签
content: dhtml
})
//显示弹窗
d.showModal();
//创建并初始化WebUploader对象
var fileUploader = WebUploader.create({
// swf文件路径(引用下载的webuploader的压缩包里的swf文件)
swf: 'Uploader.swf',
//是否允许重复的图片
duplicate :true,
// 选完文件后，是否自动上传
auto: false,
// 文件上传的服务器地址。
server: "UploadServlet",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#select-file',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
//上传文件类型
accept: fileType || null,
/*//线程数
threads: 1,
//单个文件大小限制
fileSingleSizeLimit: 2000,
//上传文件数量限制
fileNumLimit:10,
//上传前不压缩
compress:false,*/
});
//监听WebUploader事件:
//当有一批文件加载进队列时触发事件
fileUploader.on( 'fileQueued', function( file ) {
var html = '';
var attachmentSize = WebUploader.formatSize(file.size);
html += '<tr id="' + file.id +'"><td>' +file.name+'<b></b></td><td>'+attachmentSize+'</td><td><div class="progress" style="margin-bottom:0"><div class="progress-bar" style="width: 0%"></div></div></td></tr>';
$(html).appendTo('#file-list');
});
// 文件上传过程中创建进度条实时显示。
fileUploader.on( 'uploadProgress', function( file, percentage ) {
$("#"+file.id).find('b').html('<span>' + percentage*100 + '%</span>');
$('#'+file.id+' .progress').find(".progress-bar").css('width',percentage*100 + '%');//控制进度条
});
// 文件开始上传时执行。
fileUploader.on( 'uploadStart', function( file ) {
});
// 文件上传成功时执行。
fileUploader.on( 'uploadSuccess', function(file,response) {
var filePath = response.id;
if(response.error == 0){
successCallBack(file,filePath);
}else{
alert(response.message,3);
}
});
// 文件上传失败时执行。
fileUploader.on( 'uploadError', function( file ) {
fileType = file.type;
});
//错误处理
fileUploader.on('error', function( code ) {
var text = '';
var message = '';
if(fileType){
message = fileType.extensions
}else{
message = "doc,docx"
}
switch( code ) {
case 'F_DUPLICATE' : text = '该文件已经被选择了!' ;
break;
case 'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ;
break;
case 'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!';
break;
case 'Q_TYPE_DENIED' : text = '请上传'+' '+message+' '+'类型的文件';
break;
default : text = '未知错误!';
break;
}
alert(text,3);
});
// 所有文件上传完成触发
fileUploader.on( 'uploadFinished', function( file ) {
d.remove();
});
$("#start-upload").click(function(){
//调用WebUploader的upload()方法，开始上传此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
//可以指定开始某一个文件。
fileUploader.upload();
})
}
未涉及的方法或参数请看官方文档：http://fex.baidu.com/webuploader/doc/index.html
3. HTML页面
<table border='1' id='theTable'>
<tr>
<th>id</td>
<th>操作</td>
</tr>
<tr>
<td>1</td>
<td><a style="cursor:pointer;color:#337ab7;" id="upload" class="upload"/>上传</a></td>
</tr>
</table>
页面上传函数
$('.upload').live("click", function() {
var id = $(this).closest("tr").find("td").eq(0).text();
initUpload(id,uploadFile);
});
//将上传的文件信息及上传路径传入后端,后端经过处理录入数据库
function uploadFile(file, filePath) {
var fileName = file.name;
$.ajax({
url : "/service/serviceMethod/"+id+"/"+fileName+"/"+filePath,
type : "POST",
contentType : "application/json",
data : JSON
success: function(data){
alert("附件上传成功",1);
location.reload();
},
error : function() {
alert("上传文件异常!",3);
}
});
}
二、下载功能
页面函数
function download(obj){
var url= '';
if(typeof(obj.filePath) != "undefined") {
url = obj.filePath;
} else if(typeof($(obj).attr("name")) != "undefined"){
url = $(obj).attr("name");
}
if(url == '') {
return ;
}
if(url.indexOf("\\")>-1){
url = url.replace(/\\/g,"/");
}
if (url.indexOf("upload/") >= 0 || url.indexOf("temp/") >= 0) {
var url = "/downloadServlet?filePath=" + url;
downloadContent(url);
}else{
alert("文件路径错误，下载失败",3);
}
}
java后端downloadServlet代码
/**
* 下载文件
*/
@WebServlet("/downloadServlet")
public class DownloadServlet extends HttpServlet {
//编码格式
private String code = "utf-8";
public DownloadServlet() {
super();
}
public void init(ServletConfig config) throws ServletException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
InputStream systemConfig= request.getServletContext().getResourceAsStream("/WEB-INF/classes/systemConfig.properties");
Properties properties = new Properties();
//加载properties文件
properties.load(systemConfig);
//文件下载后存放路径
String fileSystemPath = pro.getProperty("fileSystemPath");
//下载路径
String filePath = request.getParameter("filePath");
File file = new File(fileSystemPath + File.separator + filePath);
/* 如果文件存在 */
if (file.exists()) {
//设置文件内容编码格式
String fileName = URLEncoder.encode(file.getName(), code);
//清除下载后文件首部的空白行
response.reset();
ServletContext servletContext=request.getServletContext();
//使客户端浏览器通过MIME类型来处理json字符串
response.setContentType(servletContext.getMimeType(fileName));
//附件下载
response.addHeader("Content-Disposition", "attachment; filename=" + fileName);
int fileLength = (int) file.length();
response.setContentLength(fileLength);
/* 如果文件长度大于0 */
if (fileLength > 0) {
/* 创建输入流 */
InputStream inStream = null;
ServletOutputStream outStream = null;
try {
inStream = new FileInputStream(file);
byte[] buf = new byte[4096];
/* 创建输出流 */
outStream = response.getOutputStream();
int readLength;
while (((readLength = inStream.read(buf)) != -1)) {
outStream.write(buf, 0, readLength);
}
} finally {
inStream.close();
outStream.flush();
outStream.close();
}
}
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
systemConfig.properties文件
fileSystemPath=D:/downLoadFile
参考文章：http://blog.ncmem.com/wordpress/2023/09/14/webupload%e7%bb%84%e4%bb%b6%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%8a%9f%e8%83%bd%e5%92%8c%e4%b8%8b%e8%bd%bd%e5%8a%9f%e8%83%bd/
欢迎入群一起讨论
一、上传功能
首先引用基于jquery的百度上传组件webuploader（webuploader.css，webuploader.js）(jquery版本要求>1.10，webuploader版本：0.1.5)，下载链接：http://www.jq22.com/jquery-info2665<link rel="stylesheet" type="text/css" href="webuploader.css"/><script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript" src="webuploader.js"></script>123创建初始化方法，初始化webuploader插件对象(可以写在一个js文件中，外部js文件引用即可)//初始化方法//id：上传文件关联数据id(可选)，successCallBack：外部调用的上传函数，fileType：文件类型function initUpload(id,successCallBack){var fileType;var dhtml = '';dhtml += '<div>';dhtml += '<table id="file-list" class="table table-bordered"><tr><th width="130px">文件名称</th><th>文件大小</th><th>上传进度</th></tr></table>';dhtml += '<div class="btn btn-primary" id="select-file">选择文件</div><div style="margin-left:10px" class="btn btn-primary" id="start-upload">开始上传</div>';dhtml += '</div>';//点击上传跳出的弹窗var d = dialog({title: '文件上传',width: 360,//加载标签content: dhtml})//显示弹窗d.showModal(); //创建并初始化WebUploader对象 var fileUploader = WebUploader.create({ // swf文件路径(引用下载的webuploader的压缩包里的swf文件) swf: 'Uploader.swf', //是否允许重复的图片 duplicate :true, // 选完文件后，是否自动上传 auto: false, // 文件上传的服务器地址。 server: "UploadServlet", // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#select-file', // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false, //上传文件类型 accept: fileType || null, /*//线程数 threads: 1, //单个文件大小限制 fileSingleSizeLimit: 2000, //上传文件数量限制 fileNumLimit:10, //上传前不压缩 compress:false,*/ }); //监听WebUploader事件: //当有一批文件加载进队列时触发事件 fileUploader.on( 'fileQueued', function( file ) { var html = ''; var attachmentSize = WebUploader.formatSize(file.size); html += '<tr id="' + file.id +'"><td>' +file.name+'<b></b></td><td>'+attachmentSize+'</td><td><div class="progress" style="margin-bottom:0"><div class="progress-bar" style="width: 0%"></div></div></td></tr>';$(html).appendTo('#file-list'); }); // 文件上传过程中创建进度条实时显示。 fileUploader.on( 'uploadProgress', function( file, percentage ) { $("#"+file.id).find('b').html('<span>' + percentage*100 + '%</span>');$('#'+file.id+' .progress').find(".progress-bar").css('width',percentage*100 + '%');//控制进度条 }); // 文件开始上传时执行。 fileUploader.on( 'uploadStart', function( file ) { }); // 文件上传成功时执行。 fileUploader.on( 'uploadSuccess', function(file,response) { var filePath = response.id; if(response.error == 0){ successCallBack(file,filePath); }else{ alert(response.message,3); } }); // 文件上传失败时执行。 fileUploader.on( 'uploadError', function( file ) { fileType = file.type; }); //错误处理 fileUploader.on('error', function( code ) { var text = ''; var message = ''; if(fileType){ message = fileType.extensions }else{ message = "doc,docx" } switch( code ) { case 'F_DUPLICATE' : text = '该文件已经被选择了!' ; break; case 'Q_EXCEED_NUM_LIMIT' : text = '上传文件数量超过限制!' ; break; case 'Q_EXCEED_SIZE_LIMIT' : text = '所有文件总大小超过限制!'; break; case 'Q_TYPE_DENIED' : text = '请上传'+' '+message+' '+'类型的文件'; break; default : text = '未知错误!'; break; } alert(text,3); }); // 所有文件上传完成触发 fileUploader.on( 'uploadFinished', function( file ) { d.remove(); }); $("#start-upload").click(function(){ //调用WebUploader的upload()方法，开始上传此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。 //可以指定开始某一个文件。 fileUploader.upload(); })}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108未涉及的方法或参数请看官方文档：http://fex.baidu.com/webuploader/doc/index.html3. HTML页面
<table border='1' id='theTable'><tr><th>id</td><th>操作</td></tr><tr><td>1</td><td><a style="cursor:pointer;color:#337ab7;" id="upload" class="upload"/>上传</a></td></tr></table>12345678910页面上传函数$('.upload').live("click", function() {var id = $(this).closest("tr").find("td").eq(0).text();initUpload(id,uploadFile);});//将上传的文件信息及上传路径传入后端,后端经过处理录入数据库function uploadFile(file, filePath) { var fileName = file.name; $.ajax({ url : "/service/serviceMethod/"+id+"/"+fileName+"/"+filePath, type : "POST", contentType : "application/json", data : JSON success: function(data){ alert("附件上传成功",1); location.reload(); }, error : function() { alert("上传文件异常!",3); } });}
123456789101112131415161718192021二、下载功能
页面函数function download(obj){var url= '';if(typeof(obj.filePath) != "undefined") {url = obj.filePath;} else if(typeof($(obj).attr("name")) != "undefined"){url = $(obj).attr("name");}if(url == '') {return ;}if(url.indexOf("\\")>-1){url = url.replace(/\\/g,"/");}if (url.indexOf("upload/") >= 0 || url.indexOf("temp/") >= 0) {var url = "/downloadServlet?filePath=" + url;downloadContent(url);}else{alert("文件路径错误，下载失败",3);}}
1234567891011121314151617181920java后端downloadServlet代码/** * 下载文件 */@WebServlet("/downloadServlet")public class DownloadServlet extends HttpServlet {//编码格式private String code = "utf-8";public DownloadServlet() {super();}
public void init(ServletConfig config) throws ServletException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {InputStream systemConfig= request.getServletContext().getResourceAsStream("/WEB-INF/classes/systemConfig.properties");Properties properties = new Properties();//加载properties文件properties.load(systemConfig);//文件下载后存放路径String fileSystemPath = pro.getProperty("fileSystemPath");//下载路径String filePath = request.getParameter("filePath");File file = new File(fileSystemPath + File.separator + filePath);/* 如果文件存在 */if (file.exists()) {//设置文件内容编码格式String fileName = URLEncoder.encode(file.getName(), code);//清除下载后文件首部的空白行response.reset();ServletContext servletContext=request.getServletContext();//使客户端浏览器通过MIME类型来处理json字符串response.setContentType(servletContext.getMimeType(fileName)); //附件下载response.addHeader("Content-Disposition", "attachment; filename=" + fileName);int fileLength = (int) file.length();response.setContentLength(fileLength);/* 如果文件长度大于0 */if (fileLength > 0) {/* 创建输入流 */InputStream inStream = null;ServletOutputStream outStream = null;try {inStream = new FileInputStream(file);byte[] buf = new byte[4096];/* 创建输出流 */outStream = response.getOutputStream();int readLength;while (((readLength = inStream.read(buf)) != -1)) {outStream.write(buf, 0, readLength);}} finally {inStream.close();outStream.flush();outStream.close();}}}}
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869systemConfig.properties文件fileSystemPath=D:/downLoadFile————————————————版权声明：本文为CSDN博主「小马东」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/cjl792655012/article/details/89333477
