webUpload组件实现文件上传功能和下载功能

一、上传功能

  1. 首先引用基于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>
  1. 创建初始化方法,初始化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>
  1. 页面上传函数
$('.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);
        }
    });
}

二、下载功能

  1. 页面函数
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);
	}
}
  1. 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);
	}

}
  1. systemConfig.properties文件
    fileSystemPath=D:/downLoadFile
    原文作者:小马东
    原文地址: https://blog.csdn.net/cjl792655012/article/details/89333477
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞