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>