百度Web Uploader组件实现文件上传(一)

Web Uploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
采用大文件分片并发上传，极大的提高了文件上传效率。

地址：http://fex.baidu.com/webuploader/
现目前百度文库这款产品的文档上传就是基于Web Uploader

接下来就是第一个demo实现文件上传，后端采用
commons-fileupload-1.3.1.jar
commons-io-2.4.jar
组件

demo的详细讲解我就写在注释里面了，毕竟百度的api太好用了。

<!DOCTYPE html>
<html>
<head>
<title>one.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../themes/webuploader.css" type="text/css"></link>
</head>
<body>
	<div id="uploader" class="wu-example">
		<!--用来存放文件信息-->
		<div id="thelist" class="uploader-list"></div>
		<div class="btns">
			<div id="picker">选择文件</div>
			<button id="ctlBtn" class="btn btn-default">开始上传</button>
		</div>
	</div>
</body>
<script type="text/javascript" src="../plugins/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="../plugins/webuploader.js"></script>
<script type="text/javascript">
	$(function() {
		var uploader = WebUploader.create({

			// swf文件路径
			swf : "../plugins/Uploader.swf",

			// 文件接收服务端。
			server : '/Angular/servlet/FileUpload',

			// 选择文件的按钮。可选。
			// 内部根据当前运行是创建，可能是input元素，也可能是flash.
			pick : '#picker',

			// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
			resize : false

		});
		var $btn = $("#ctlBtn");
		$btn.on('click', function() {
			uploader.upload();
		});
	});
</script>
</html>

后端：

package com.lx;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class FileUpload extends HttpServlet {
	private static final long serialVersionUID = -3618247291848427195L;
	// 1.文件上传路径
	private static final String UPLOAD_DIRECTORY = "D:/文件上传";
	// 2.设置临时存储文件大小，当超过大小时，将先存储超出大小文件在临时目录
	private static final int MEMORY_THRESHOLD = 1024 * 1024 * 30;
	// 3.设置最大文件上传值
	private static final int MAX_FILE_SIZE = 1024 * 1024 * 2000;
	// 4.最大请求值
	private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 2048;

	public FileUpload() {
		super();
	}

	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the GET method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 1.设置字符编码为utf-8
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		// 2.检测是否为多媒体上传
		if (!ServletFileUpload.isMultipartContent(request)) {
			// 2.1如果不是则停止
			PrintWriter writer = response.getWriter();
			writer.println("Error: 表单必须包含 enctype=multipart/form-data");
			writer.flush();
			return;
		}
		// 3.配置上传参数
		DiskFileItemFactory factory = new DiskFileItemFactory();
		// 4. 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
		factory.setSizeThreshold(MEMORY_THRESHOLD);
		// 5.设置临时存储目录 java.io.tmpdir默认的临时文件路径为服务器的temp目录
		factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

		ServletFileUpload upload = new ServletFileUpload(factory);

		// 6.设置最大文件上传值
		upload.setFileSizeMax(MAX_FILE_SIZE);

		// 7.设置最大请求值 (包含文件和表单数据)
		upload.setSizeMax(MAX_REQUEST_SIZE);

		// 8. 如果目录不存在则创建
		File uploadDir = new File(UPLOAD_DIRECTORY);
		if (!uploadDir.exists()) {
			uploadDir.mkdir();
		}
		try {
			// 10.解析请求的内容提取文件数据
			List<FileItem> formItems = upload.parseRequest(request);
			// 10.1迭代表单数据
			if (formItems != null && formItems.size() > 0) {
				for (FileItem item : formItems) {
					if (!item.isFormField()) {
						String nFileName = new File(item.getName()).getName();

						item.write(new File(UPLOAD_DIRECTORY + File.separator + File.separator + nFileName+""));

						item.delete();
					}
				}
			}
		} catch (Exception ex) {
		}
	}

	public void init() throws ServletException {
	}

}

附件：代码demo

百度Web Uploader组件实现文件上传(一)

猜你喜欢