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. PhotoSphereViewer 全景图

    1网站地址:http://photo-sphere-viewer.js.org/markers.html#demo 2参数中文地址:https://www.cnblogs.com/big-tree/p ...

  2. VSS源代码管理器运行代码分析工具的命令

    当你发现代码库总是报需要联系管理员运行代码分析工具时,你可以使用命令分析代码库代码解决: To fix the database problems, you can restart the analy ...

  3. ES6解构赋值的应用场景

    一.变量交换 1.ES6的方式 { let a=; let b=; [a,b]=[b,a]; console.log(a,b); } 输出为 2.ES5的方式 采用中间变量的方式进行存储 二.获取函数 ...

  4. PAT 甲级 1015 Reversible Primes（20）

    1015 Reversible Primes(20 分) A reversible prime in any number system is a prime whose "reverse& ...

  5. Openflow的架构+源码剖析 转载

    Openvswitch的架构网上有如下的图表示: Openvswitch原理与代码分析(1):总体架构 Openvswitch原理与代码分析(2): ovs-vswitchd的启动 Openvswit ...

  6. 洛谷1066 2^k进制数

    原题链接 大力猜结论竟然猜对了.. 对于一对\(k,w\),我们可以把\(w\)位划分成\(k\)位一段的形式,每一段就是转换成十进制后的一位,这个从题面的解释中应该可以理解. 先不考虑可能多出(即剩 ...

  7. ui设计教程分享：关于Logo设计要素

      1. 视觉上”一语双关 我最喜欢的一些Logo在视觉设计上”一语双关”,将两张图片.两张意象巧妙结合,合二为一. WinePlace 的Logo就是一个绝佳的案例 这个Logo看起来像图钉,暗喻着 ...

  8. [Hbase]Hbase章２　Hbase读写过程解析

    写数据 Hbase使用memstore和storefile存储对表的更新.数据在更新时首先写入hlog和memstore,memstore中的数据是排序的,当memstore累计到一定的阀值时,就会创 ...

  9. Minimum Size Subarray Sum LT209

    Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...

  10. ajax的基础

    去年也是这个时候,开始学了ajax,也是这个技术领我走上了网页制作的道路,于是这样感觉到手写html比之前的dw拖拖拽拽要有意思得多. 话不多说,下面是一个例子: 这个是ajax显示页面:index. ...