使用WebUploader实现图片上传

nifhlheimr 发布于2021-11-22 09:34 / 2965人阅读

摘要：前言案例使用的开发工具不足之处希望各位大佬们多多指教顶包文件代码图片路径选择图片代码图片上传选完文件后，是否自动上传。内部根据当前运行是创建，可能是元素，也可能是这里是的文件上传方式，或者。默认值设置文件上传域的。

前言：

案例使用的开发工具：eclipse

不足之处希望各位大佬们多多指教(￣▽￣*)顶

1. jar包

2. js文件

3. HTML代码

	图片路径:
	选择图片

4. js代码

5. XML配置

5.1 web.xml

        WebUploaderServlet    WebUploaderServlet    servlet.WebUploaderServlet    WebUploaderServlet    /webUploader.do

5.2 Tomcat下的server.xml的标签中添加

6. java代码

6.1 servlet：WebUploaderServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		// TODO Auto-generated method stub			Map map=WebUploaderAction.webUploaderImg(request, response);			System.out.println("code:"+map.get("code")+" data:"+map.get("data"));			try {				response.getWriter().write(JSONObject.fromObject(map).toString());			} catch (IOException e) {				// TODO Auto-generated catch block				e.printStackTrace();			}}

6.2 class：WebUploaderAction.java

package action;import java.io.File;import java.io.IOException;import java.util.HashMap;import java.util.List;import java.util.Map;import java.util.UUID;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 WebUploaderAction extends HttpServlet{				// 上传文件存储目录	    private static final String UPLOAD_DIRECTORY = "upload";	 	    // 上传配置	    private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 3;  // 3MB	    private static final int MAX_FILE_SIZE      = 1024 * 1024 * 40; // 40MB	    private static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 50; // 50MB			public static Map webUploaderImg(HttpServletRequest request,HttpServletResponse response) {						System.out.println("webUploaderImg方法进入");						response.setCharacterEncoding("utf-8");			response.setContentType("text/json");						Map map=new HashMap();						if (!ServletFileUpload.isMultipartContent(request)) {	            // 如果不是则停止				map.put("code", 400);				map.put("data", "Error: 表单必须包含 enctype=multipart/form-data");	            return map;	        }			        // 配置上传参数	        DiskFileItemFactory factory = new DiskFileItemFactory();	        // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中	        factory.setSizeThreshold(MEMORY_THRESHOLD);	        // 设置临时存储目录	        factory.setRepository(new File(System.getProperty("java.io.tmpdir")));	        ServletFileUpload upload = new ServletFileUpload(factory);	        // 设置最大文件上传值	        upload.setFileSizeMax(MAX_FILE_SIZE);	         	        // 设置最大请求值 (包含文件和表单数据)	        upload.setSizeMax(MAX_REQUEST_SIZE);	        	        // 中文处理	        upload.setHeaderEncoding("UTF-8"); 	        // 构造临时路径来存储上传的文件	        // 这个路径相对当前应用的目录	        String uploadPath = "D:/" + UPLOAD_DIRECTORY;	        // 如果目录不存在则创建	        File uploadDir = new File(uploadPath);	        if (!uploadDir.exists()) {	            uploadDir.mkdir();	        }	        //设置路径参数	        String imgUrl="";	        try {	            // 解析请求的内容提取文件数据	            @SuppressWarnings("unchecked")	            List formItems = upload.parseRequest(request);	            System.out.println("c");	            if (formItems != null && formItems.size() > 0) {	                // 迭代表单数据	                for (FileItem item : formItems) {	                    // 处理不在表单中的字段	                    if (!item.isFormField()) {	                    	//获取上传文件的名称	                        String fileName =UUID.randomUUID().toString()+".png";//防重名	                        //指定的类型	                        String filePath = uploadPath + File.separator + fileName;	                        File storeFile = new File(filePath);	                        // 在控制台输出文件的上传路径	                        System.out.println("文件上传成功："+filePath);	                        // 保存文件到硬盘	                        item.write(storeFile);	                        imgUrl="/" + UPLOAD_DIRECTORY + "/" + fileName;//不可以直接filePath	                        System.out.println("imgUrl:"+imgUrl);	                    }	                }	            }	        } catch (Exception ex) {	            ex.printStackTrace();	        }	        map.put("code",200);	        map.put("data", imgUrl);	        return map;		}}

7. 效果展示

混合云服务器托管 webuploader文件上传实现图片上传 asp实现上传图片 android 实现上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/124029.html

在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

mindwind 2019-08-02 15:35 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

endiat 2019-08-26 10:14 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

funnyZhang 2019-08-30 11:27 评论0 收藏0
移动端开发（使用webuploader上传图片,客户端交互,修改alert弹窗等）

摘要：之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示即与客户端有交互遇到不少的坑总结一下问题图片上传功能使用工具百度的暂时遇到的坑删除图片实际上并没有完全删除需要自己在源码上添加详情看的提问上传的图片旋转角度有问题比之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示(即与客户端有交互）遇到不少的坑总结一下问题 1.图片上传功能 ...

李昌杰 2019-08-19 17:26 评论0 收藏0
WebUploader上传插件使用说明

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述具有两套运行时支持：HTML5与FLASH 分片、并发预览、压缩多途径添加文件 MD5验证引入文件虽然官方没说必须要引入JQuery...

xbynet 2019-08-29 12:27 评论0 收藏0
WebUploader上传插件使用说明

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述具有两套运行时支持：HTML5与FLASH 分片、并发预览、压缩多途径添加文件 MD5验证引入文件虽然官方没说必须要引入JQuery...

罗志环 2019-08-20 15:59 评论0 收藏0