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;
}
}
