commons-fileupload處理plupload多文件上傳

阿新 • • 發佈：2017-09-01

oge utils ner posit eee error sre i/o method

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

commons-fileupload處理plupload多文件上傳

oge utils ner posit eee error sre i/o method web端使用plupload上傳文件，支持文件多選，顯示文件大小、上傳進度。 java服務器servlet保存客戶端上傳的文件，使用commons-fileupload-1.3

plupload.Uploader多文件上傳

alert art pre err mic lda toms contains read 1.前臺CommonUpfile.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CommonUp

input標簽處理多文件上傳

post ... spa format multipl max ase AI capture p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Consolas; color: #2b9edb } p.p2 { mar

ajaxFileUpload.js插件支持多文件上傳的方法

before append status appendto secure del 信息 log inf 前提條件：ajaxFileUpload.js插件多文件上傳步驟：1、修改源碼，（源碼只支持單個文件的上傳）：復制代碼代碼如下: //修改前代碼------- //var

.net 多文件上傳

Jquery Uploadify多文件上傳實例

hash factor param 項目影響 face tex 上傳文件 button jQuery Uploadify開發使用的語言是java。詳細的相關文檔，可以參考官網的doc：http://www.uploadify.com/documentation/ 官網的

多文件上傳

blog 技術 += col code 多文件上傳 inner con tlist 自己寫的，css 就不放上了 <div class="tck_but04_zh mar_top20 "> <

TP5單文件、多文件上傳

don logs urn public ror space size del 返回文件上傳可以直接引用框架自定義的文件上傳類 use think\File; 這裏封裝一個文件上傳的model，以便重復利用 UploadFiles.php 1、控制器層 use app\a

Struts---多文件上傳、單文件下載

conf doctype stack link posit onf for req image struts.xml 1 <?xml version="1.0" encoding="UTF-8" ?> 2 <!DOCTYPE struts

WebApi實現Ajax模擬Multipart/form-data方式多文件上傳

vid 基本 rip err tps del 多文件 delete back 前端頁面代碼： <input type="file" class="file_control" /><br /> <input type="file" cla

多文件上傳與攔截器

quest 配置文件 mon index.jsp except for can ring servle @Controller public class MostFileController { //多文件上傳 @RequestMa

javascript結合nodejs實現多文件上傳

ima 實現依賴看到了包括小夥伴邊緣 multipart images 前端文件上傳功能比較依賴後端，所以第一步用nodejs實現一個供文件上傳的功能接口。因為本人對nodejs也是一知半解，所以剛開始的想法是像原始的ajax交互那樣，獲取上傳文件的內容，然後

element-ui upload組件多文件上傳

text bmi video upload span weight orm struct multi 之前有一篇寫的如何同時傳遞form表單及upload組件文件，如果有多個upload文件該如何傳遞呢上代碼 html 1 <el-form-it

基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)

允許 jquery pac locale 錯誤信息部分 src alt date 首先需要導入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte

springMVC實現 MultipartFile 多文件上傳

cat rect .com tor try class isempty param public 1、Maven引入所需的 jar 包（或自行下載）　　　　 <dependency> <groupId>commons-io

ajax實現文件上傳，多文件上傳，追加參數

bytes meta -- ets throw eal proc cti esp 1.html部分實現代碼: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

MultipartFile 多文件上傳的應用

es2017 使用 use text nco nal per 單位格式公司的項目很多地方要用到文件上傳，以前的上傳主要是用apache的fileupload ,使用的感受並不太好。今天試了試spring的MultipartFile，感覺還不錯，封裝的比較簡潔。當然，中

ASP.NET 基礎多文件上傳

filename req 操作 tex 多文件上傳遍歷 httppost con get ////多圖上傳 [HttpPost] public string duo() { ///.net 多文件

HTML C# ajax結合ashx處理程序實現文件上傳

chan erro radius 處理插件 nbsp 成功 jquer dex ajax結合ashx處理程序實現文件上傳一、ajaxFileUpload是一個異步上傳文件的jQuery插件。　　ajaxFileUpload參數說明：(copy了別人的參數說明) 1、u

layui d多文件上傳

acc val 分享圖片 n-n hit root 上傳 remove .config 借閱 http://www.layui.com/demo/upload.html 前端代碼 <form class="layui-form" action="#" meth

commons-fileupload處理plupload多文件上傳

相關推薦