1、Jsp页面,上传文件
<!DOCTYPE html>
<html>
<head>
<!-- 为velocity传递参数 -->
#navLevel1Param("artifactList")
##set( $memberLeftBarParameter = "active" )
<!-- meta及资源引用部分 -->
#parse("./common/common_head_title.html")
#parse("./common/common_head_meta.html")
#parse("./common/common_head_ref.html")
#parse("./common/common_message_show.html")
</head>
<body class='contrast-blue'>
<!-- head部分-->
#parse("./common/common_head.html")
<div id='wrapper'>
<div id='main-nav-bg'></div>
<!-- 左侧导航栏 -->
#parse("/common/common_left.html")
<section id='content'>
<div class='container-fluid'>
<div class='row-fluid' id='content-wrapper'>
<div class='span12'>
<div class='row-fluid'>
<div class='span12'>
<div class='page-header'>
<h1 class='pull-left'>
<i class='icon-ok'></i>
<span>新增图片信息</span>
</h1>
<div class='pull-right'>
<ul class='breadcrumb'>
<li>
<a href="index.html"><i class='icon-bar-chart'></i>
</a>
</li>
<li class='separator'>
<i class='icon-angle-right'></i>
</li>
<li>
Forms
</li>
<li class='separator'>
<i class='icon-angle-right'></i>
</li>
<li class='active'>Validations</li>
</ul>
</div>
</div>
</div>
</div>
<div class='row-fluid'>
<div class='span12 box'>
<div class='box-header blue-background'>
<div class='title'>图片信息</div>
<!-- <div class='actions'>
<a href="#" class="btn box-remove btn-mini btn-link"><i class='icon-remove'></i>
</a>
<a href="#" class="btn box-collapse btn-mini btn-link"><i></i>
</a>
</div> -->
</div>
<div class='box-content box-no-padding'>
<form accept-charset="UTF-8" id="frm2" name="frm2" action="${basePath}artifact/artifactSave" class="form form-horizontal form-striped" method="post" style="margin-bottom: 0;">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="artifactPath" type="hidden" id="artifactPath"/>
<input name="artifactLength" type="hidden" id="artifactLength"/>
<input name="authenticity_token" type="hidden" value="${authenticity_token}" />
</div>
<div class='control-group'>
<label class='control-label' for='inputText2'>图片名称</label>
<div class='controls'>
<input class='input-block-level' name="videoDesc" id='videoDesc' placeholder='图片名称' type='text' />
</div>
</div>
<div class='control-group'>
<label class='control-label' for='inputText2'>栏目</label>
<div class='controls'>
<!-- 输入下拉框 s -->
<div class='span5'>
<div class='row-fluid' id="divSubject" subjectPid="$!{unit.subjectPid}">
<select class='select2 input-block-level' id="subjectSelect" name="unitId">
<option value='$!{unit.subjectPid}' />$!{subjectName}
</select>
</div>
</div>
<!-- 输入下拉框 e -->
</div>
</div>
<div class='control-group'>
<label class='control-label' for='inputTextArea2'>附件描述</label>
<div class='controls'>
<textarea class='input-block-level' id='inputTextArea2' name="artifactPurpose" placeholder='填写附件描述信息' rows='3'></textarea>
</div>
</div>
</form>
<div class="box-content">
<form action="${basePath}fileUpload" enctype="multipart/form-data" id="fileupload" method="POST">
<div class="row-fluid fileupload-buttonbar">
<div style="padding-left:93px;" class="span7">
<span style=float:left;padding-right:36px;">上传图片</span>
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>添加...</span>
<input data-bfi-disabled="" multiple="" name="files[]" type="file">
</span>
<button class="btn btn-primary start" type="submit">
<i class="icon-upload icon-white"></i>
<span>开始上传</span>
</button>
</div>
<div class="span5 fileupload-progress fade">
<div aria-valuemax="100" aria-valuemin="0" class="progress progress-success progress-striped active" role="progressbar">
<div class="bar" style="width:0%;"></div>
</div>
<div class="progress-extended"> </div>
</div>
</div>
<div class="fileupload-loading"></div>
<br>
<table class="table table-striped" role="presentation">
<tbody class="files" data-target="#modal-gallery" data-toggle="modal-gallery"></tbody>
</table>
</form>
</div>
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>{%=file.origName%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
</td>
<td>{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>开始</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td>{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>取消</span>
</button>
{% } %}</td>
</tr>
{% } %}
</script>
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.origName%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.origName%}" data-gallery="gallery" download="{%=file.origName%}"><img src="{%=file.thumbnailUrl%}"></a>
{% } %}</td>
<td class="name">
<a class="fileUrl" href="{%=file.url%}" title="{%=file.origName%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.origName%}">{%=file.origName%}</a>
</td>
<td class="imgUrl">{%=file.url%}</td>
<td class="size"><span class="fileLength">{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td>
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="icon-trash icon-white"></i>
<span>删除</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
</td>
</tr>
{% } %}
</script>
<div class='form-actions' style='margin-bottom:0'>
<div class='btn btn-primary btn-large'>
<button class='icon-save' name="button" type="submit"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- footer部分-->
#parse("/common/common_footer_ref.html")
#parse("/macros/page/common_page.vm")
<script type="text/javascript" src="${basePath}/static/manager/js/artifact/artifactEdit.js" ></script>
<script type="text/javascript">
$('.icon-save').click(function(){
var videoDesc = $('#videoDesc').val();
if (videoDesc == "" || videoDesc == null) {
alert("图片名称不能为空!");
return false;
}
var subjectSelect = $('#subjectSelect').val();
if (subjectSelect.length < 1) {
alert("请选择栏目!");
return false;
}
var inputTextArea2 = $('#inputTextArea2').val();
if(inputTextArea2.length < 1) {
alert("请填写附件描述!");
return false;
}
text = $(".fileUrl").map(function() {
return $(this).attr('href');
}).get().join(",");
//alert("text: "+ text);
if (text != null ) {
$('#artifactPath').val(text);
}
text = $(".fileLength").map(function() {
return $(this).text();
}).get().join(",");
//alert("text: "+ text);
if (text != null) {
$('#artifactLength').val(text);
}
$("#frm2").submit();
});
</script>
</body>
</html>
2、后台Controller处理文件
package com.jydcms.admin.web.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.jyd.fileupload.UploadFactory;
import com.jyd.fileupload.beans.FileInfo;
import com.jydcms.web.controller.BaseController;
/**
* 上传文件
* @author Administrator
*
*/
@Controller
public class UploadController extends BaseController{
@Resource
UploadFactory fileUploaderFactory;
/**
* 得到本分类下的条目列表
* @author cgxue
* @date 2016-05-5
* @param request
* @param response
* @return
*
*/
@RequestMapping(value="/upload/fileUpload",method={RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public Map<String, Object> fileUpload(HttpServletRequest request, HttpServletResponse response){
List<FileInfo> filelist = fileUploaderFactory.getUploader().doUpload(request);
Map<String, Object> map = new HashMap<String, Object>();
map.put("files", filelist);
return map;
}
@RequestMapping(value="/upload/fileDelete",method={RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public Map<String, Object> fileDelete(HttpServletRequest request, HttpServletResponse response){
fileUploaderFactory.getUploader().deleteFile(request);
Map<String, Object> map = new HashMap<String, Object>();
map.put("delete","true");
return map;
}
}
3、文件上传spring配制文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.0.xsd ">
<!-- add by xiongzhao 文件上传配置 start-->
<!--配置上传工具处理器 -->
<bean id="localUploader" class="com.jyd.fileupload.LocalUploader" scope="singleton" />
<!-- 图片上传配置 -->
<bean id="imgUploaderConfig" class="com.jyd.fileupload.beans.UploadConfig" scope="singleton" >
<!-- 文件保存位置 -->
<property name="repositoryRelativePath" value="/apache-tomcat-7.0.50/cms/ROOT/upload/image/"></property>
<!-- 上传文件允许最大值 -->
<property name="maxSize" value="2097152"></property>
<!-- 允许上传的图片类型 -->
<property name="allowExten" value="jpg,gif,png,bmp"></property>
<!-- 是否生成缩略图 -->
<property name="allowGenerateThumbnail" value="true"></property>
<!-- 图片域名地址 -->
<property name="fileDomain" value="http://cmstest:8080/upload/image/"></property>
<!-- 删除操作的url地址 -->
<property name="deleteUrl" value="http://localhost:8080/jydcms-admin/fileUpload"></property>
</bean>
<!-- 文件上传配置 -->
<bean id="fileUploaderConfig" class="com.jyd.fileupload.beans.UploadConfig" scope="singleton" >
<!-- 文件保存位置 -->
<property name="repositoryRelativePath" value="/apache-tomcat-7.0.50/cms/ROOT/upload/image/"></property>
<!-- 上传文件允许最大值 -->
<property name="maxSize" value="8097152"></property>
<!-- 允许上传的文件类型 -->
<property name="allowExten" value="txt,doc,xls,ppt,pdf,docx,zip,tar"></property>
<!-- 是否生成缩略图,如果为非图片,即使设置为true,系统也不会生成 -->
<property name="allowGenerateThumbnail" value="false"></property>
<!-- 文件域名地址 -->
<property name="fileDomain" value="http://cmstest:8080/upload/image/"></property>
<!-- 删除操作的url地址 -->
<property name="deleteUrl" value="http://192.168.30.16:8080/jydcms-admin/upload/fileDelete"></property>
</bean>
<!-- 图片上传工具的bean配置 -->
<bean id="imgUploaderFactory" class="com.jyd.fileupload.UploadFactory" scope="singleton">
<property name="uploadConfig" ref="imgUploaderConfig"></property>
<property name="uploader" ref="localUploader"></property>
</bean>
<!-- 文件上传工具的bean配置 -->
<bean id="fileUploaderFactory" class="com.jyd.fileupload.UploadFactory" scope="singleton">
<property name="uploadConfig" ref="fileUploaderConfig"></property>
<property name="uploader" ref="localUploader"></property>
</bean>
</beans>