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组件实现文件上传(一)的更多相关文章

  1. 百度Web Uploader组件实现文件上传之分片上传(一)

    当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度.多的不说了直接怼代码 前端是三个监听:一个是获取md5,一个是分片,最后一个是合并代码 <! ...

  2. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  3. 使用commons-fileupload-1.2.1.jar等组件实现文件上传

    使用的主要jar包:commons-io-1.3.2.jar包;commons-fileupload-1.2.1.jar包:commons-lang-2.3.jar,在使用组件实现文件上传时候要注意前 ...

  4. jsp实现文件上传（二）用cos组件实现文件上传

    jsp表单 <%@ page language="java" pageEncoding="utf-8"%> <html> <hea ...

  5. ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件，并在文件上传后清空文件

    前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...

  6. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  7. MVC文件上传-使用jQuery.FileUpload和Backload组件实现文件上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: 处理文件上传的服务端组件Backload 用于处理文件上传的服务端组件 ...

  8. 利用百度编辑器和IIS限制文件上传的大小

    1.百度编辑器的大小限制 针对不同的文件类型限制大小 例如图片是imageMaxSize ,依次类推 /* 前后端通信相关的配置,注释只允许使用多行方式 */ {     /* 上传图片配置项 */ ...

  9. Java使用Commons-FileUpload组件实现文件上传最佳方案

    学习的目标 使用commons-fileupload实现文件上传 使用commons-fileupload封装文件上传工具类   什么是commons-fileupload? The CommonsF ...

随机推荐

  1. shell加密工具shc的安装和使用

    1) 工具说明 shell脚本是可读写的, 很有可能会泄露敏感信息, 如用户名/密码/路径/IP等. 同样在shell脚本运行时会也泄露敏感信息. shc是一个加密shell脚本的工具, 它的作用是把 ...

  2. Swift 小技巧 || 老偏方

    自己平时用的时候,或者看别人有一些好用的技巧分享一下,希望大家能get到 1.关于颜色 2.关于标记 // TODO:这样的标记XCode8才有的 // FIXME:这个也是XCode8有的

  3. 【教程】教你解决“Windows 资源保护找到了损坏文件但无法修复其中某些文件”的问题【转载】

    转载:http://www.cystc.org/?p=2827 很多人都会用sfc /scannow来解决系统文件损坏的问题,但有时也会遇到连sfc都无法修复的情况,最常见的就是出现“Windows ...

  4. json等序列化模块 异常处理

    今日学习内容如下: 1.序列化模块 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 比如,我们在python代码中计算的一个数据需要给另外一段程序使用,那我们怎么给? 现 ...

  5. 17.Mysql分区

    17.Mysql分区分区是指根据一定的规则把一个表分解成多个部分,逻辑上仍是一张表,实际上由多个物理分区对象组成.分区对于应用是完全透明的,不影响业务逻辑和SQL编写.分区的优点: 可以存储更多的数据 ...

  6. hdu 2571 (命运) 那个配图女神

    http://acm.hdu.edu.cn/showproblem.php?pid=2571 枚举每一个点,找出按照题目要求的这个点的上一点的最大值,合并到当前点,注意只取前面的一种情况 #inclu ...

  7. fedora 安装gdal

    hese steps worked for me on a Fedora system: 1.) download the 3 files related to oracle instant clie ...

  8. R语言读取Hive数据表

    R通过RJDBC包连接Hive 目前Hive集群是可以通过跳板机来访问 HiveServer, 将Hive 中的批量数据读入R环境,并进行后续的模型和算法运算. 1. 登录跳板机后需要首先在Linux ...

  9. MySQL学习笔记-大纲

    软件程序性能测试在之前<品味性能之道>系列中已经大量提到,讲解了很多测试方法.测试观念.测试思想等等.最近准备深入MySQL进行学习并总结.分别查阅<MySQL性能调优与架构设计&g ...

  10. synchronized Lock

    synchronized和Lock都是Java语言提供的两种实现对共享资源进行同步的机制.其中synchronized使用Object对象本身的wait().notify().notifyAll()方 ...