`

JSP页面上传文件

 
阅读更多

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="&#x2713;" />
         						    <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>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics