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;
    	}
    }
    
  • 相关阅读:
    获取当前时间的时间戳
    js获取时间戳
    排序(一)冒泡,选择,插入
    MATLAB入门(一)数组
    锐捷客户端下虚拟机VMware无法联网的问题
    C++ Primer 读书笔记
    LA 4329 树状数组入门
    BZOJ 4352 预处理 + DP
    BZOJ 1954 (POJ 3764) Trie的经典应用 求树上最大异或值
    BZOJ 1597 斜率优化
  • 原文地址:https://www.cnblogs.com/layuechuquwan/p/11824133.html
Copyright © 2011-2022 走看看