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. AnguarJS——第10章 路由

    第10章 路由 一个应用是由若个视图组合而成的,根据不同的业务逻辑展示给用户不同的视图,路由则是实现这一功能的关键. 10.1 SPA SPA(Single Page Application)指的是通 ...

  2. 微信小程序基础架构

    一个微信小程序界面由一个页面描述文件,一个页面逻辑文件,一个样式表文件来进行描述 在主目录中的三个以app开头的文件就是微信小程序的主描述文件 app.js :主逻辑文件,用来注册小程序 app.js ...

  3. JSP中的数据库操作，MySQL基础操作（一）

    一.JDBC JDBC(java data base concectivity),是一种用于执行SQL语句的java API,可以为多种关系库提供统一访问. 通常使用JDBC完成以下操作: 1)同数据 ...

  4. Linux下 MYSQL 主从复制、同步

    mysql从3.23.15版本以后提供数据库复制功能.利用该功能可以实现两个数据库同步,主从模式(A->B),互相备份模式(A<=>B)的功能. 主从模式(A->B)的配置过程 ...

  5. mysql 事务中如果有sql语句出错，会导致自动回滚吗？

    事务,我们都知道具有原子性,操作要么全部成功,要么全部失败.但是有可能会造成误解. 我们先准备一张表,来进行测试 CREATE TABLE `name` ( `id` int(11) unsigned ...

  6. XP下1433端口打不开

    问题:操作系统windows xp:数据库sql server 2000:安装后通过程序无法访问数据,原因是数据库的默认端口1433未打开. 原因:sql server 2000的bug,需要升级补丁 ...

  7. mongodb导入csv结构化数据

    csv数据样本 "103238704","","-jmyuncker@aol.com-","-r4Vp5iL2VbM=-" ...

  8. Liunx mv（转）

    转竹子—博客:http://www.cnblogs.com/peida/archive/2012/10/27/2743022.html mv命令是move的缩写,可以用来移动文件或者将文件改名(mov ...

  9. （转）system.badimageformatexception 未能加载文件或程序集

    “/xxxxx”应用程序中的服务器错误. ------------------------------------------------------------------------------- ...

  10. 一个基于DPI技术实现了内网资产识别的应用

    https://www.forescout.com/products/counteract/see/visibility-capabilities/ Home ≫ Products ≫ ForeSco ...