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="width: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='width: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:\eclipsework\carr\src\main\webapp\,存储的目标地址
		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;
	}
}

 

posted @ 2019-11-09 08:29  腊月出去玩  阅读(224)  评论(0编辑  收藏  举报