Java文件上传的两种方式(uploadify和Spring默认方式)
2016-08-16 11:38
337 查看
最近项目中用到的两种文件上传方式做一下总结:
一. uploadify:
uploadify控件的scripts和styles在这里:http://download.csdn.net/detail/sunroyi666/9604420
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>
<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:
这里把数据库更新给省略了,有需要可以自己添加。
除上传外,其他实现功能:
1. 视频上传后的预览功能
2. 视频是单文件上传,附件是多文件上传和删除
二. Spring默认的上传功能:
JSP:
后台Java:
Spring配置文件springmvc-servlet.xml中添加:
如果和uploadify同时使用的话,需要做一些修改,否则uploadify的上传文件会被Spring拦截:
一. uploadify:
uploadify控件的scripts和styles在这里:http://download.csdn.net/detail/sunroyi666/9604420
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>
<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); } }
相关文章推荐
- Java实现文件上传的两种方法(uploadify和Spring)
- java简单多线程方式+实现文件上传(spring mvc + jquery.form.js 框架)
- Java文件上传的两种方式
- 基于Java中两种jersey文件上传方式
- java 两种上传文件(图片)方式(app通过流上传)+服务端获取方式(多图上传,普通文本上传,图片压缩)
- MyEclipse设置JSP页面默认编码方式以及设置在Java文件中作者、日期等说明
- Flex与java进行socket通信完成以断点续传方式的文件上传
- java 实现文件复制的两种方式
- 文件上传两种方式
- java使用uploadify上传文件
- MyEclipse设置JSP页面默认编码方式以及设置在Java文件中作者、日期等说明
- 设置JSP页面默认编码方式以及设置在Java文件中作者、日期等说明
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- Spring配置文件applicationContext.xml的两种拆分方式
- MyEclipse设置JSP页面默认编码方式以及设置在Java文件中作者、日期等操作说明
- s2sh整合中hibernate两种配置方式中spring配置文件中的不同
- JAVA各层怎样读取资源文件(servletContext和classloader两种方式)
- 使用WebClient上传文件的两种方式
- spring中读取资源文件两种方式及应用场景
- java三种方式实现文件的上传