百度Web Uploader组件实现文件上传(一)
程序员文章站
2022-04-20 21:05:21
...
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太好用了。
后端:
附件:代码demo
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
推荐阅读
-
php结合web uploader插件实现分片上传文件_PHP
-
php结合web uploader插件实现分片上传文件
-
php结合web uploader插件实现分片上传文件 jquery file upload ajaxfileupload.js jquery uploadif
-
Dojo1.2通过Flash实现了一个多文件上传组件
-
html form一点基础知识,实现文件上传_html/css_WEB-ITnose
-
php结合web uploader插件实现分片上传文件_PHP
-
怎样用一个按钮实现本地文件选择上传?_html/css_WEB-ITnose
-
百度Web Uploader组件实现文件上传之分片上传(一)
-
百度Web Uploader组件实现文件上传(一)
-
php结合web uploader插件实现分片上传文件 jquery file upload ajaxfileupload.js jquery uploadif