commons-fileupload处理plupload多文件上传

web端使用plupload上传文件，支持文件多选，显示文件大小、上传进度。

java服务器servlet保存客户端上传的文件，使用commons-fileupload-1.3.2组件

HTML、JS代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Update Config Files</title>
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/plupload-2.1.3/moxie.min.js"></script>
<script type="text/javascript"
	src="scripts/plupload-2.1.3/plupload.min.js"></script>
<script type="text/javascript" src="scripts/utils/util-find-parent.js"></script>
</head>
<body style="font: 13px Verdana; background: #eee; color: #333">
	<h1>上传（更新）配置文件</h1>

	<div id="filelist">Your browser doesn‘t have Flash, Silverlight
		or HTML5 support.</div>
	<br />

	<div id="container">
		<button type="button" id="pickfiles">选择文件</button>
		<button type="button" id="uploadfiles">开始上传</button>
	</div>

	<br />
	<div id="console"></div>

	<script type="text/javascript">
		//保存等待上传的文件
		var preUploadFiles = new Array();
		var fileError = false;

		/**
		 * 点击“删除”按钮删除对应的文件项
		 * @param {type} obj button对象
		 * @returns {undefined}
		 */
		function removeFileByButton1(obj) {
			var p = findParent(obj, ".upFileItemDiv");
			if (p == null) {
				return;
			}
			pid = p.id;
			p.parentNode.removeChild(p);
			var index = -1;
			for (var i = 0; i < preUploadFiles.length; i++) {
				var file = preUploadFiles[i];
				if (file.id == pid) {
					file.destroy();
					uploader.removeFile(file);
					index = i;
					break;
				}
			}
			if (index >= 0) {
				preUploadFiles.splice(index, 1);
			}
		}

		var clearPreUploadFiles = function() {
			for (var i = 0; i < preUploadFiles.length; i++) {
				var file = preUploadFiles[i];
				file.destroy();
				uploader.removeFile(file);
			}
			preUploadFiles.length = 0;
		};

		var uploader = new plupload.Uploader({
			runtimes : ‘html5,flash,silverlight,html4‘,
			browse_button : ‘pickfiles‘,
			container : document.getElementById(‘container‘),
			url : ‘UploadServlet?‘ + Math.random(),
			flash_swf_url : ‘scripts/plupload-2.1.3/Moxie.swf‘,
			silverlight_xap_url : ‘scripts/plupload-2.1.3/Moxie.xap‘,
			filters : {
				max_file_size : ‘4mb‘,
				mime_types : [ {
					title : "Txt files",
					extensions : "txt"
				}, {
					title : "Properties files",
					extensions : "properties"
				}, {
					title : "Excel 2003",
					extensions : "xls"
				}, {
					title : "Excel 2007 or above",
					extensions : "xlsx"
				}, {
					title : "Excel XLSM",
					extensions : "xlsm"
				} ],
				prevent_duplicates : true//不允许选取重复文件
			},
			init : {
				PostInit : function() {
					document.getElementById(‘filelist‘).innerHTML = ‘‘;

					document.getElementById(‘pickfiles‘).onclick = function() {
						clearPreUploadFiles();
						fileError = false;
						document.getElementById(‘filelist‘).innerHTML = ‘‘;
						document.getElementById(‘console‘).innerHTML = ‘‘;
					};

					document.getElementById(‘uploadfiles‘).onclick = function() {
						if (uploader.files.length == 0) {
							alert("请先选择上传的文件");
							returnfalse;
						}
						for (var i = 0; i < preUploadFiles.length; i++) {
							var file = preUploadFiles[i];
							var btn = document.getElementById(file.id + "_btn");
							if (btn != null && btn != undefined) {
								btn.parentNode.removeChild(btn);
							}
						}
						uploader.start();
						returnfalse;
					};
				},
				FilesRemoved : function(up, files) {
					//plupload.each(files, function(file) {//});
				},
				FilesAdded : function(up, files) {
					plupload.each(files, function(file) {
						preUploadFiles.push(file);
						var str = "<button type=‘button‘ id=‘" + (file.id + "_btn") + "‘ onclick=‘removeFileByButton1(this);‘>删除</button>";
						document.getElementById(‘filelist‘).innerHTML += ‘<div class=\‘upFileItemDiv\‘ id="‘ + file.id + ‘">‘ + file.name + ‘ (‘ + plupload.formatSize(file.size) + ‘) <b></b>‘ + str + ‘</div>‘;
					});
				},
				FileUploaded : function(up, file, responseObject) {
					var responseInfo = responseObject.response;
					if (responseObject != null && responseInfo != null) {
						if (responseInfo.indexOf("success") != 0) {
							fileError = true;
						}
						document.getElementById(‘console‘).innerHTML += "\nInfo #" + file.name + " :  " + responseObject.response + "</br>";
					}
				},
				UploadProgress : function(up, file) {
					document.getElementById(file.id).getElementsByTagName(‘b‘)[0].innerHTML = ‘<span>‘ + file.percent + "%</span>";
				},
				UploadComplete : function(up, files) {
					document.getElementById(‘filelist‘).innerHTML = "";
					clearPreUploadFiles();
				},
				Error : function(up, err) {
					//alert(Error #" + err.code + ": " + err.message);document.getElementById(‘console‘).innerHTML += "\nError #" + err.code + ": " + err.message + "</br>";
				}

			}
		});

		uploader.init();
	</script>
</body>
</html>

补充一个util-find-parent.js文件

/**
 * 向上寻找父对象
 * @param {HTMLElement} element
 * @param {String} param 包含.表示寻找class的父级，包含#表示寻找id的父级
 * @param {Number} depth 向上查询父级的层级（深度）
 * @returns {element.parentNode}
 */
function findParent(element, param, depth) {
    var ps = param.split(" ");
    var pobjs = new Array();
    for (var n = 0; n < ps.length; n++) {
        var str = ps[n];
        var index = str.indexOf(".");
        if (index >= 0) {
            pobjs.push({type: 1, name: str.substr(1, str.length - 1)});
        } else {
            index = str.indexOf("#");
            if (index >= 0) {
                pobjs.push({type: 2, name: str.substr(1, str.length - 1)});
            } else {
                pobjs.push({type: 3, name: str});
            }
        }
    }
    if (pobjs.length == 0)
        return null;
    var max = (depth == undefined || depth <= 0) ? 10 : depth;
    var i = 0;
    while (i < max) {
        if (element == null || element == undefined) {
            break;
        }
        for (var j = 0; j < pobjs.length; j++) {
            var obj = pobjs[j];
            if (obj.type == 1) {
                if (element.className == obj.name) {
                    return element;
                }
            } else if (obj.type == 2) {
                if (element.id == obj.name) {
                    return element;
                }
            } else if (obj.type == 3) {
                if (element.name == obj.name) {
                    return element;
                }
            }
        }
        element = element.parentNode;
        i++;
    }
    return null;
}

下面是java服务器接收客户端上传的文件数据并保存

import ch.qos.logback.classic.Logger;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
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.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.slf4j.LoggerFactory;

/**
 *
 * @author zkpursuit
 */
@WebServlet(name = "UploadServlet", urlPatterns = {"/UploadServlet"})
public class UploadServlet extends HttpServlet {

    private final Logger logger = (Logger) LoggerFactory.getLogger(UploadServlet.class);

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");

        DiskFileItemFactory factory = new DiskFileItemFactory();

        ServletContext servletContext = this.getServletConfig().getServletContext();
        File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
        // 设置缓冲区大小，这里是4kb
        factory.setSizeThreshold(4096);
        // 设置缓冲区目录
        factory.setRepository(repository);
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");
        // 设置最大文件尺寸，这里是4MB
        upload.setSizeMax(4194304);

        String error = null;
        try {
            List<FileItem> items = upload.parseRequest(request);
            Iterator<FileItem> iter = items.iterator();
            while (iter.hasNext()) {
                FileItem item = iter.next();
                if (!item.isFormField()) {
                    String uploadPath = request.getServletContext().getRealPath("/usr.config");
                    File fold = new File(uploadPath);
                    if (!fold.exists()) {
                        fold.mkdir();
                    }
                    String fileName = item.getName();
                    try {
                        File targetFile = new File(uploadPath + "/" + fileName);
                        if (!targetFile.exists()) {
                            targetFile.createNewFile();
                        }
                        item.write(targetFile);
                    } catch (Exception ex) {
                        error = ex.getMessage();
                        if (error == null) {
                            error = ex.toString();
                        }
                        logger.error(error, ex);
                    }
                }
            }
        } catch (FileUploadException ex) {
            error = ex.getMessage();
            if (error == null) {
                error = ex.toString();
            }
            logger.error(error, ex);
        }
        try (PrintWriter pw = response.getWriter()) {
            if (error != null) {
                pw.append("faild  -> <b style=\"color:#FF0000;\">（严重）" + error + "</b>");
            } else {
                pw.append("success  -> 上传完成！");
            }
            pw.flush();
        }
    }

    /**
     * Handles the HTTP <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

转自：https://my.oschina.net/zkpursuit/blog/798916

时间： 2024-11-08 04:31:44

commons-fileupload处理plupload多文件上传的相关文章

WebForm之FileUpload控件（文件上传）

FileUpload控件要与Button.LinkButton.ImageButton配合使用 FileUpload控件的方法及属性: 1.SaveAs("要上传到服务器的绝对路径")方法:用来上传文件 注:一般使用Server.MapPath()方法进行相对路径与绝对路径之间的转换. 2.FileName属性:要上传文件的文件名,不带路径 3.PostedFile.ContentLength属性:获得上传文件的字节长度,除以1024,得到KB <一>最简单的上传 //点击

FileUpload系列：（3）文件上传和下载示例

示例由1个Servlet和3个JSP组成. 1.FileServlet package com.rk.web.servlet; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.URLEncoder; import java.util.Has

文件上传之 commons-fileupload(二)

对commons fileupload上传组件的简单封装 在上一篇文章<利用Jakarta commons fileupload组件实现多文件上传>中,我介绍了commons fileupload组件的基本原理和实现方法.但是在实际操作中,我们需要分析每个FileItem,然后从该FileItem中读取该控件的name和value,显然这不符合我们的习惯.比如我们在页面上有个text文本框: <input type="text" name="possess&

SpringMVC：文件上传和下载

SpringMVC:文件上传和下载 准备工作 文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传,但是SpringMVC上下文中默认没有装配MultipartResolver,因此默认情况下其不能处理文件上传工作.如果想使用Spring的文件上传功能,则需要在上下文中配置MultipartResolver. 前端表单要求:为了能上传文件,必须将表单的method设置为POST,并将enctype设置为multipart/form-data.只有在这样的情况下,浏览

使用SpringMVC进行文件上传

文件上传是表现层常见的需求,在Spring MVC中底层使用Apache的Commons FileUpload工具来完成文件上传,对其进行封装,让开发者使用起来更加方便.接下来看看如何开发? 1 导入common-fileupload包 <!-- commons-fileUpload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupl

20160420javaweb之文件上传和下载

一.文件上传 1.提供表单允许用户通过表单选择文件进行上传 表单必须是POST提交 文件输入框必须有name属性,只有有name属性的输入项浏览器才会进行提交 需要设置enctype属性值为multipart/form-data POST /Day15/upload.jsp HTTP/1.1 Accept: text/html, application/xhtml+xml, */* Referer: http://localhost/Day15/upload.jsp Accept-Languag

Struts2系列：（11）文件上传

生活赋予我们一种巨大的和无限高贵的礼品,这就是青春:充满着力量,充满着期待,充满着求知,充满着希望. Struts 2使用FileUpload 拦截器和 Commons FileUpload 组件实现文件上传. FileUploadInterceptor 全名:org.apache.struts2.interceptor.FileUploadInterceptor Interceptor that is based off(基于) of MultiPartRequestWrapper,  whi

JQuery 实现文件上传

简述: 实现前端使用jquery上传文件 后台用servlet处理文件上传以及保存 知识点: 1. 用到ajaxfileupload.js库 2. 后台servlet文件保存 其中ajaxfileupload的库下载地址: http://www.phpletter.com/download_project_version.php?version_id=34 Maven中需要添加两个java的库,用来上传以及在服务器保存文件 [html] view plaincopy <dependency>

文件上传下载之文件上传

13.1  文件上传 13.1.1  概述 在开发基于Web的应用的时候,经常会碰到需要实现文件上传.下载的功能,比如编辑某个商品,需要给它上传一个图片等等. 不使用Struts2的话,可以有很多种方式来实现文件上传,比如使用Apache的Common-FileUpload等.但是这些传统的方式,实现起来非常麻烦,需要写很多代码来进行控制. 现在使用Struts2来实现文件上传的功能,会更加简单和方便,事实上,Struts2的文件上传功能,默认就是基于Common-FileUpload来实现的,