zoukankan      html  css  js  c++  java
  • jsp上传图片

    jsp页面

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>门店编辑</title>
      <link rel="stylesheet" href="${ctxtPath }/static/layui/css/layui.css">
    </head>
    <body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>门店编辑</legend>
    </fieldset>
     
    <form id="form-update" class="layui-form" action="">
     	 <div class="layui-form-item">
      		<div class="layui-form-item" style="display: none;">
    			<label class="layui-form-label">ID</label>
    			<div class="layui-input-inline">
    				<input type="text" id="shopId" name="shopId" value="${shopId}"
    					lay-verify="required" class="layui-input" >
    			</div>
    		</div>
    		<div class="layui-form-item" style="display: none;">
    			<label class="layui-form-label">shopLicenseImg</label>
    			<div class="layui-input-inline">
    				<input type="text" id="shopLicenseImg" name="shopLicenseImg" value=""
    				 	class="layui-input" >
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">门店名称</label>
    			<div class="layui-input-inline">
    				<input type="text" name="shopName" value="${carShop.shopName}"
    					lay-verify="required" class="layui-input">
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">门店地址</label>
    			<div class="layui-input-inline">
    				<input type="text" name="shopAddress" value="${carShop.shopAddress}"
    					lay-verify="required" class="layui-input"> 
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">门店法人</label>
    			<div class="layui-input-inline">
    				<input type="text" id="shopLegal" name="shopLegal" value="${carShop.shopLegal}" 
    					lay-verify="required" class="layui-input">
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">执照编号</label>
    			<div class="layui-input-inline">
    				<input type="text" id="shopLicenseNo" name="shopLicenseNo" value="${carShop.shopLicenseNo}"
    					lay-verify="required" class="layui-input">
    			</div>
    		</div> 
    		<!-- 图片 -->
    			<div class="layui-form-item">
    			<label class="layui-form-label">营业执照</label>
    		    <button type="button" class="layui-btn layui-btn-normal" id="upload1">
    				<i class="layui-icon">�</i>上传图片
    			</button>
    			<input class="layui-upload-file" type="file" accept="undefined" name="file" multiple=""> 
    			<div class="layui-upload-list" id="test-upload-more-list">
    		        <div id="imgDiv" ><img id="test" src="${carShop.shopLicenseImg}" 
    		         style="300px; height:auto; margin-left: 30px;"></div>
    		    </div>
    		</div> 
    	    <div class="layui-input-block">
    	      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即修改</button>
    	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    	    </div>
      </div>
    </form>        
    
    <script src="${ctxtPath }/static/layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> 
     
    <script>
    layui.use(['form', 'layedit','carousel','upload'], function(){
    	  var form = layui.form
    	  ,layer = layui.layer
    	  ,$=layui.jquery
    	  ,carousel = layui.carousel
    	  ,upload = layui.upload;
    	  
    	  //图片上传
    	  upload.render({
    			elem: '#upload1' 
    			,url: '${ctxtPath}/upLoad/uploadImage'
    			,accept: 'images' //允许上传的文件类型
    			,acceptMime: 'image/*' //打开文件时自动筛选图片类型
    		 	,done: function(response){//res返回值,必须是json串
    					//上传完毕回调
    					 $("#shopLicenseImg").val("${ctxtPath }/uploadify/image/"+response.url+"");
    					 // 这能上传图片 $("#imgDiv").empty();
    					 $("#imgDiv").append("<a href='${ctxtPath }/uploadify/image/"+response.url+"' target='_blank'> "+
    					       "<img src='${ctxtPath }/uploadify/image/"+response.url+"'style='300px;"+
    					       "height:auto; margin-left: 30px;' alt='展示图片'></a>"); 
    			 }
    			,error: function(){
    				 //请求异常回调
    			}
    	 });
    	  
    	  //监听指定开关
    	  form.on('switch(switchTest)', function(data){
    	    layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
    	      offset: '6px'
    	    });
    	    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
    	  });
    	  
    	  //监听提交
    	  form.on('submit(demo1)', function(data){
    			$.ajax({
    				url : "${ctxtPath}/adminShop/updateCheckShop",
    				data : $("#form-update").serialize(),
    				type : "POST"
    			});
    			var index = parent.layer.getFrameIndex(window.name); 
    			parent.layer.close(index);
    	    layer.alert(JSON.stringify(data.field), {
    	      title: '最终的提交信息'
    	    })
    	    return false;
    	  });
    	  
    	  
    	});
    
    	
    </script>
    </body>
    </html>
    

     controller层

    package com.laima.car.sys;
    
    import java.io.File;
    import java.io.IOException;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;
    
    import javax.servlet.http.HttpServletRequest;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.util.FileCopyUtils;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    import com.laima.car.common.NotLogin;
    import com.laima.car.util.DateUtils;
    
    @Controller
    @RequestMapping(value = "/upLoad")
    public class UploadController {
    	@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
    	@ResponseBody
    	@NotLogin
    	public Map<String, Object> uploadImage(HttpServletRequest request, @RequestParam("file") MultipartFile uploadify)
    			throws IOException {
    		String uuid = UUID.randomUUID().toString().replace("-", "");
    		//打印文件地址,用分割,D:eclipseworkcarrsrcmainwebapp,存储的目标地址
    		String filePath = request.getSession().getServletContext().getRealPath("/");
    		//获取本地的文件名称
    		String fileName2 = uploadify.getOriginalFilename();
    		//获取最后一个.
    		String fileExt = fileName2.substring(fileName2.lastIndexOf("."));
    		
    		String newFileName = uuid + fileExt;
    		String date = DateUtils.parseDate(new Date(), "yyyyMMdd");
    		String configPath = File.separator + "uploadify" + File.separator + "image" + File.separator + date
    				+ File.separator;
    		filePath += configPath;
    		File file = new File(filePath);
    		if (!file.exists()) {
    			file.mkdirs();
    		}
    		File newFile = new File(filePath + newFileName);
    		FileCopyUtils.copy(uploadify.getBytes(), newFile);
    		Map<String, Object> map = new HashMap<String, Object>();
    		map.put("url", date + "/" + newFileName);
    		map.put("oldName", fileName2);
    		return map;
    	}
    }
    
  • 相关阅读:
    MDX Step by Step 读书笔记(六) Building Complex Sets (复杂集合的处理) Filtering Sets
    在 Visual Studio 2012 开发 SSIS,SSAS,SSRS BI 项目
    微软BI 之SSIS 系列 在 SSIS 中读取 SharePoint List
    MDX Step by Step 读书笔记(五) Working with Expressions (MDX 表达式) Infinite Recursion 和 SOLVE_ORDER 原理解析
    MDX Step by Step 读书笔记(五) Working with Expressions (MDX 表达式)
    使用 SQL Server 2012 Analysis Services Tabular Mode 表格建模 图文教程
    MDX Step by Step 读书笔记(四) Working with Sets (使用集合) Limiting Set and AutoExists
    SQL Server 2012 Analysis Services Tabular Model 读书笔记
    Microsoft SQL Server 2008 MDX Step by Step 学习笔记连载目录
    2011新的开始,介绍一下AgileEAS.NET平台在新的一年中的发展方向
  • 原文地址:https://www.cnblogs.com/layuechuquwan/p/11824133.html
Copyright © 2011-2022 走看看