Java檔案上傳的兩種方式（uploadify和Spring預設方式）
阿新 • • 發佈：2019-01-31
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="../jsp/include/taglibs.jsp"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Upload</title> <script src="<c:url value="/scripts/jquery-1.8.3.min.js"/>" type="text/javascript"></script> <script type="text/javascript" src="<c:url value="/scripts/jquery-admin/jquery-ui.js" />"></script> <script type="text/javascript" src="<c:url value="/scripts/jquery-admin/component.js" />"></script> <script type="text/javascript" src="<c:url value="/scripts/jquery-admin/jquery-validate.js" />"></script> <script type="text/javascript" src="<c:url value="/scripts/jquery-admin/jquery-form.js" />"></script> <script type="text/javascript"src="<c:url value="/scripts/jquery-admin/init.js" />"></script> <script type="text/javascript"src="<c:url value="/scripts/jquery-admin/jquery.ui.datepicker-zh-CN.js" />"></script> <link rel="stylesheet" href="<c:url value='/styles/admin/admin1.css'/>"> <link href="<c:url value="/styles/jquery-ui/jquery-ui.css" />" rel="stylesheet" type="text/css" /> <script src="<c:url value="/scripts/jquery-uploadify/jquery.uploadify.min.js"/>" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="<c:url value="/scripts/jquery-uploadify/uploadify.css"/>"> <style type="text/css"> #jidAttachTable {width:400px;font-size:14px;border:1px solid #d3d3d3;border-left-width:0;border-top-width:0;} #jidAttachTable td{border: 1px solid #d3d3d3;text-align:left;padding:5px;border-right-width:0;border-bottom-width:0;} #jidAttachTable .i-i-title{width:450px;} #jidAttachTable .i-i-content{width:100px;} </style> <script type="text/javascript"> $(function(){ //視訊上傳 var uploadVideo = $('#file_upload_video').uploadify({ 'buttonText':'上傳視訊', 'multi': false, 'fileTypeDesc': '請選擇wmv視訊檔案', 'fileTypeExt': '*.wmv', 'swf' : '<c:url value="/scripts/jquery-uploadify/uploadify.swf"/>"', 'uploader' : '<c:url value="/uploadAttach.do"/>' , 'onUploadError': uploadVideoUploadError, 'onUploadSuccess':uploadVideoUploadSuccess }); function uploadVideoUploadError(){ alert("上傳視訊發生錯誤"); } function uploadVideoUploadSuccess(file, data, response){ var strs_ = data.split("@"); var videoName_ = strs_[0]; var videoPath_ = strs_[1]; $("#vidioPreview").val("/upload/" + videoPath_); } var arrAttach = new Array(); //將現有的附件載入到臨時陣列中 var nowAttachIds_ = "${attachs}"; //初始化現有的附件 if(nowAttachIds_ != null && nowAttachIds_ != ""){ var ids_ = nowAttachIds_.split("@") ; var i = 0; for( ; i < ids_.length ; i++){ arrAttach.push(ids_[i]); } } //附件上傳 var uploadAttach = $('#file_upload_attach').uploadify({ 'buttonText':'上傳附件', 'multi': false, 'swf' : '<c:url value="/scripts/jquery-uploadify/uploadify.swf"/>"', 'uploader' : '<c:url value="/uploadAttach.do"/>', 'onUploadError': uploadAttachUploadError, 'onUploadSuccess':uploadAttachUploadSuccess }); function uploadAttachUploadError(){ alert("上傳過程中發生錯誤,您可以嘗試重複上傳一次！") } function uploadAttachUploadSuccess(file, data, response){ var strs_ = data.split("@") ; var documnetId_ = strs_[0]; var fileName_ = strs_[1]; var attach_ = "<tr class=\"jsClassDeleteAttachButtonTR\"> " + " <td class='i-i-title'>" + fileName_ + "</td> " + " <td class='i-i-content'><button class=\"jsClassDeleteAttachButton\" dataAttach="+ documnetId_ +">刪除</button></td>" + " </tr>"; arrAttach.push(documnetId_); $("#jidAttachTable").append(attach_); } $(".jsClassDeleteAttachButton").live("click",function(){ var data_ = $(this).attr("dataAttach"); var i_ = 0; for(;i_ < arrAttach.length; i_++){ if(data_ == arrAttach[i_]){ arrAttach.splice(i_,1); break; } } $(this).parent().parent().remove(); //alert(arrAttach) }); }); var videotag = ""; $(function() { $("#PreviewDiv").dialog({ title: "視訊預覽", autoOpen: false, modal: true, resizable: false, position : "center", width: "489px", buttons: { "關閉": function() { $("#PreviewDiv").dialog("close"); } } }); $( "#PreviewDiv" ).on( "dialogopen", function( event, ui ) { $("#PreviewDiv").html(videotag); } ); $( "#PreviewDiv" ).on( "dialogclose", function( event, ui ) { $("#PreviewDiv").html(""); } ); }); var video_root_path = "http://localhost:8080/ProjectTest/"; function openDownloadFrame() { var _storePreview= video_root_path + $("#vidioPreview").val(); var _embed_head = '<EMBED src=\"'; var _embed_tail = '\" width=\"450\" height=\"400\" type=\"audio/x-wav\" loop=\"false\" autostart=\"true\">' + '</EMBED>'; videotag = _embed_head + _storePreview + _embed_tail; $("#PreviewDiv").dialog("open"); } </script> </head> <body> <form:form id="form" name="basedata" modelAttribute="basedata" action="update.do" method="post" > <div style="height:40px;border:1px solid #ebebeb;padding:10px;"> <div style="width:150px;float:left;"> <input id="file_upload_video" name="file_upload_video" type="file" multiple="true"> </div> <div style="padding-left:10px;"> <input id="vidioPreview" type="text" name="${bad.attributeStore}" value="${basedata[storeName]}"/> <input onclick="openDownloadFrame();" type="button" name="button" value="預覽"> </div> </div> <div id='divContext' style="height:40px;border:1px solid #ebebeb;padding:10px;"> <div style="width:150px;float:left;"> <input id="file_upload_attach" name="file_upload_attach" type="file" multiple="true"> </div> <div class="i-attachContainer"> <table id="jidAttachTable"> <c:forEach items="${attachList}" var="attach"> <tr class="jsClassDeleteAttachButtonTR"> <td class='i-i-title'>${attach.name}</td> <td class='i-i-content'> <button class="jsClassDeleteAttachButton" dataAttach="${attach.id}">刪除</button> </td> </tr> </c:forEach> </table> </div> </div> <div id="PreviewDiv"> </div> </form:form> </body> </html>
後臺Java：
package com.sun.fileUpload; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.util.Date; import java.util.Iterator; import java.util.LinkedList; import java.util.List; 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.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; @Controller public class upload{ // 附件上傳 @RequestMapping("/uploadAttach.do") public void attachUpload(ModelMap modelMap,HttpServletRequest request ,HttpServletResponse response) throws IOException { System.out.println("upload file .... start"); String savePath = request.getSession().getServletContext().getRealPath("/") + "upload"; System.out.println("store path is :" + savePath); File f1 = new File(savePath); if (!f1.exists()) { f1.mkdirs(); } DiskFileItemFactory fac = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(fac); upload.setHeaderEncoding("utf-8"); List<FileItem> fileList = null; try { fileList = upload.parseRequest(request); } catch (FileUploadException ex) { ex.printStackTrace(); return; } Iterator<FileItem> it = fileList.iterator(); String name = ""; System.out.println("deal the files ... start"); //儲存完畢儲存進入資料庫 //Document document = null; while (it.hasNext()) { FileItem item = it.next(); if (!item.isFormField()) { name = item.getName(); long size = item.getSize(); String type = item.getContentType(); if (name == null || name.trim().equals("")) { continue; } System.out.println("dealing file info:" + "fileName" + name + " size" + size + " type:" + type); //副檔名格式： if (name.lastIndexOf(".") >= 0) { name.substring(name.lastIndexOf(".")); } //存檔案到磁碟指定路徑 且儲存檔案記錄存入資料庫，如果儲存發生故障，資料庫記錄也會建立失敗 /* document = new Document(); document.setFileType(extName); document.setFullName(name); document.setDescription(name); document.setName(name); document.setUploadDate(new Date()); document = documentManager.saveWithFileStore(document,item,savePath,extName);*/ System.out.println(new Date() + "persist id :" + name); File saveFile = new File(savePath + "/" + name); try { item.write(saveFile); } catch (Exception e) { e.printStackTrace(); throw new RuntimeException(new Date() + "store file error"); } } } System.out.println("deal the files end"); System.out.println("upload file .... end"); response.getWriter().print(name + "@" + name); } }
這裡把資料庫更新給省略了，有需要可以自己新增。
除上傳外，其他實現功能：
1. 視訊上傳後的預覽功能
2. 視訊是單檔案上傳，附件是多檔案上傳和刪除
二. Spring預設的上傳功能：
JSP：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="../jsp/include/taglibs.jsp"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Upload</title> <script src="<c:url value="/scripts/jquery-1.8.3.min.js"/>" type="text/javascript"></script> <script type="text/javascript" src="<c:url value="/scripts/jquery-admin/jquery-ui.js" />"></script> <link rel="stylesheet" href="<c:url value='/styles/admin/ace.css'/>"> <style type="text/css"> .file { position: relative; display: inline-block; background: #428BCA; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #000000; text-decoration: none; text-indent: 0; line-height: 20px; } .file:link { color: white; text-decoration:none; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #1B6AAA; border-color: #78C3F3; color: white; text-decoration: none; } </style> </head> <body> <form:form id="fileUploadForm" method="post" action="uploadFile.do" name="uploadfile" modelAttribute="uploadfile" enctype="multipart/form-data"> 點選儲存後上傳: <a href="javascript:;" class="file">選擇檔案 <input type="file" name="videoFile" id="videoFile"> </a> <input type="text" style="width:300px;" id="resourceUrl-field" name="resourceUrl" placeholder="資源地址" class="col-sm-12" value="${uploadfile}"/> <input type="submit" value="儲存" class="btn btn-sm btn-primary"> </form:form> </body> </html>
後臺Java：
package com.sun.fileUpload;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
import java.util.Iterator;
import java.util.LinkedList;
import java.util.List;
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.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
@Controller
public class upload{
@RequestMapping(value = "/uploadFile.do")
public String uploadController(HttpServletRequest request,ModelMap modelMap,
@RequestParam("videoFile") MultipartFile videoFile) throws IllegalStateException, IOException{
String savePath = request.getSession().getServletContext().getRealPath("/") + "upload";
try {
uploadSingleFile(savePath, videoFile, request.getSession().getServletContext().getRealPath("/"));
}catch (Exception e) {
return "/upload";
}
modelMap.addAttribute("uploadfile", "upload/" + videoFile.getOriginalFilename());
return "/upload";
}
/**
*
* @param path 這個path 是upload的子目錄路徑 比如 path=/image 最終將下載到[root/upload/image/]目錄下
* @param file
* @return
* @throws java.io.IOException
*/
public static String uploadSingleFile(String path, MultipartFile file, String rootPath) {
if (!file.isEmpty()) {
byte[] bytes;
try {
bytes = file.getBytes();
// Create the file on server
File serverFile = new File(path + "/" + file.getOriginalFilename());
BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
stream.write(bytes);
stream.close();
System.out.println("Server File Location=" + serverFile.getAbsolutePath());
return getRelativePathFromUploadDir(serverFile, rootPath).replaceAll("\\\\", "/");
} catch (IOException e) {
e.printStackTrace();
}
}else{
System.out.println("檔案內容為空");
}
return null;
}
/**
*
* @param file
* @return 返回從upload目錄下面的相對路徑
*/
public static String getRelativePathFromUploadDir(File file, String rootPath){
if(null==file)
return "";
String absolutePath = file.getAbsolutePath();
if(absolutePath.indexOf(rootPath)!=-1 && rootPath.length()<absolutePath.length())
return absolutePath.substring(absolutePath.indexOf(rootPath)+rootPath.length());
else
return "";
}
}Spring配置檔案springmvc-servlet.xml中新增：
<bean id=”multipartResolver” class=”org.springframework.web.multipart.commons.CommonsMultipartResolver”>
<property name=”defaultEncoding” value=”UTF-8″ />
</bean>如果和uploadify同時使用的話，需要做一些修改，否則uploadify的上傳檔案會被Spring攔截：
<!-- 支援上傳檔案 -->
<bean id="multipartResolver" class="org.sun.com.MyMultipartResolver">
<!--設定上傳檔案的編碼格式，用於解決上傳的檔案中文名亂碼問題 -->
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
<property name="excludeUrls" value="/uploadAttach.do,/uploadVideo.do"/>
</bean>org.sun.com.MyMultipartResolver：
<pre name="code" class="java">package org.sun.com;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
/**
* @author Sun
*/
public class MyMultipartResolver extends CommonsMultipartResolver {
private String excludeUrls;
private String[] excludeUrlArray;
public String getExcludeUrls() {
return excludeUrls;
}
public void setExcludeUrls(String excludeUrls) {
this.excludeUrls = excludeUrls;
this.excludeUrlArray = excludeUrls.split(",");
}
/**
* 這裡是處理Multipart http的方法。如果這個返回值為true,那麼Multipart http body就會MyMultipartResolver 消耗掉.如果這裡返回false
* 那麼就會交給後面的自己寫的處理函式處理例如剛才ServletFileUpload 所在的函式
* @see org.springframework.web.multipart.commons.CommonsMultipartResolver#isMultipart(javax.servlet.http.HttpServletRequest)
*/
@Override
public boolean isMultipart(HttpServletRequest request) {
for (String url: excludeUrlArray) {
// 這裡可以自己換判斷
if (request.getRequestURI().contains(url)) {
return false;
}
}
return super.isMultipart(request);
}
}