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
- 大小: 692.8 KB
分享到:
相关推荐
NULL 博文链接:https://1197581932.iteye.com/blog/2397870
测试用百度的Web Uploader程序,基于ASP.net的版本,VS2013上编译使用,可预览,支持图片和pdf文件,支持大文件上传,可自行修改参数实现大部分需求
百度web uploader java servlet上传示例
web-uploader百度多文件上传插件 支持IE6+,很强大 web-uploader百度多文件上传插件 支持IE6+,很强大web-uploader百度多文件上传插件 支持IE6+,很强大
Web Uploader java后台实现
Uploader是非常强大的异步文件上传组件,支持ajax、iframe、flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证、图片预览、进度条等,广泛应用于淘宝网,比如退款系统、...
Fine Uploader 是一个采用Ajax技术实现的文件上传组件,支持拖拽文件上传。使用很简便,只需在页面中引入相应的CSS JavaScript,剩下的就只服务器端处理逻辑。在其提供的下载包中已经有多种语言实现包括:ASP.NET, ...
主要介绍了移动端 Vue+Vant 的Uploader 实现 上传、压缩、旋转图片功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。 <!--引入CSS--> <link rel=stylesheet type=text/css href=webuploader文件夹/webuploader.css> <!--引入JS--> [removed] [removed] ...
文件上传demo 包括服务端 js css 支持拖拽上传,图片预览 文件上传demo 包括服务端 js css 支持拖拽上传,图片预览 文件上传demo 包括服务端 js css 支持拖拽上传,图片预览 文件上传demo 包括服务端 js css ...
FineUploader - 多个文件上传插件包含图像预览,拖放,进度条功能。支持S3和Azure,图像缩放,分块,恢复,暂停以及大量其他功能。
libcurl web-uploader 文件分片上传,断点续传 代码在嵌入平台rv1126 测试使用
NULL 博文链接:https://chenwes.iteye.com/blog/1525161
Cute WebUI AjaxUploader注册文件(AjaxUploader.lic) AjaxUploader.lic 注册版文件,测试可用。
web uploader 写的demo.web uploader 写的demo.web uploader 写的demo.
NULL 博文链接:https://mojianpo.iteye.com/blog/753665
Net Core文件上传、断点续传-前端基于Web Uploader 支持通过input file跟流上传.zip
web-uploader