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 += '';
dhtml += '文件名称 文件大小 上传进度
';
dhtml += '选择文件开始上传';
dhtml += '';
//点击上传跳出的弹窗
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 += '+ file.id +'">' +file.name+' '+attachmentSize+' ';
$(html).appendTo('#file-list');
});
// 文件上传过程中创建进度条实时显示。
fileUploader.on( 'uploadProgress', function( file, percentage ) {
$("#"+file.id).find('b').html('' + percentage*100 + '%');
$('#'+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