欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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


百度Web Uploader组件实现文件上传(一)
            
    
    博客分类: webupload Web Uploader文件上传 
地址: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组件实现文件上传(一)
            
    
    博客分类: webupload Web Uploader文件上传 
  • 大小: 692.8 KB