一、上传功能

首先引用基于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/
欢迎入群一起讨论