html 代码:
<form id="addCard" class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">正面图片</label>
<div class="col-sm-10">
<input type="file" name="filez" id="filez"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">侧面图片</label>
<div class="col-sm-10">
<input type="file" name="filec" id="filec"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">反面图片</label>
<div class="col-sm-10">
<input type="file" name="filef" id="filef"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">宣传图片</label>
<div class="col-sm-10">
<input type="file" name="filex" id="filex"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">视频</label>
<div class="col-sm-10">
<input type="file" name="filev" id="filev"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" id ="adduserbutton" value="添加" class="btn btn-info" />
<a th:href="@{/cards}" class="btn btn-info">返回</a>
<div id="alteraddMsg"></div>
</div>
</div>
js:
$('#adduserbutton').click(function() {
var filev=$("#filev").val(); //价格
var filec=$("#filec").val(); //价格
var filef=$("#filef").val(); //价格
var filez=$("#filez").val(); //价格
var filex=$("#filex").val(); //价格
if($.x.isEmpty(filez)){
alert("请上传卡片正面图片");
return false;
}
if($.x.isEmpty(filef)){
alert("请上传卡片反面图片");
return false;
}
if($.x.isEmpty(filec)){
alert("请上传卡片侧面图片");
return false;
}
if($.x.isEmpty(filex)){
alert("请上传卡片宣传图片");
return false;
}
if($.x.isEmpty(filev)){
alert("请上传图片视频");
return false;
}else{
var filevaa=filev.indexOf(".");
var filevhz=filev.substring(filevaa);
if(filevhz!=".mp4"){ //根据后缀,判断是否符合格式
alert("视频仅支持MP4格式,重新选择!");
document.getElementById('filev').value=""; // 不符合,就清除,重新选择
return false;
}else{
if(getFileSize("filev")>10){
alert("文件不能大于10M!");
return false;
}
}
}
var formData = new FormData($("#addCard")[0]);
$('#adduser').submit({
url:"/card/addCard",
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(result){
if (result.code == '0000') {
alert("添加成功");
window.location.href = "/cards";
};
if(result.code == '9999'){
alert("商品编号已存在");
return;
}
},
error:function(err){
alert("网络连接失败,稍后重试",err);
}
});
});
ctroller:
@Autowired
private CuCardService cuCardService;
//上传真实地址
@Value("${file.uploadFolder}")
private String uploadFolder;
//映射地址
@Value("${file.url}")
private String url;
@Value("${wpost}")
private String wpost;
@RequestMapping(value = "/card/addCard", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> addCardAjax(
@RequestParam(value = "filez", required = false) MultipartFile filez,
@RequestParam(value = "filec", required = false) MultipartFile filec,
@RequestParam(value = "filef", required = false) MultipartFile filef,
@RequestParam(value = "filex", required = false) MultipartFile filex,
@RequestParam(value = "filev", required = false) MultipartFile filev,
HttpServletRequest request, Model model,HttpSession session) throws Exception {
String cid = request.getParameter("cid");
Map<String, Object> b = new HashMap<String, Object>();
CuCard cr = cuCardService.selectCardByCid(cid);
if(null!=cr) {
b.put("code", "9999");
return b;
}
//获取本机ip
String ip = IpUtil.getIp(request);
//拼装地址前缀 http://localhost:8081/+staticAccessPath+/+图片名称
String qurl = FileUtil.getUrl(ip, wpost, url);
String filezurl = FileUtil.uploadFile(uploadFolder, filez);
String filecurl = FileUtil.uploadFile(uploadFolder, filec);
String filefurl = FileUtil.uploadFile(uploadFolder, filef);
String filexurl = FileUtil.uploadFile(uploadFolder, filex);
String filevurl = FileUtil.uploadFile(uploadFolder, filev);
//添加到实体类
CuCard card=new CuCard();
card.setCardZphoto(qurl+filezurl);
card.setCardFphoto(qurl+filefurl);
card.setCardCphoto(qurl+filecurl);
card.setCardXphoto(qurl+filexurl);
card.setCrstatus(Status.NORMAL);
card.setCts(new Date());
card.setUcts(new Date());
card.setCardVideo(qurl+filevurl);
Map<String, Object> map = cuCardService.addCard(card);
return map;
}
utils:
package com.manage.utils;
import java.io.File;
import java.io.FileOutputStream;
import java.util.UUID;
import org.springframework.web.multipart.MultipartFile;
public class FileUtil {
public static String uploadFile(String path, MultipartFile file) throws Exception{
String fileName = file.getOriginalFilename();
String suffixName = fileName.substring(fileName.lastIndexOf("."));
// 文件上传后的路径
fileName = UUID.randomUUID() + suffixName;
String uppath=path+fileName;
File targetFile = new File(uppath);
file.transferTo(targetFile);
return fileName;
}
public static String getUrl(String ip,String wpost,String staticAccessPath) {
String url="http://"+ip+":"+wpost+staticAccessPath;
return url;
}
}
application.properties:
file.staticAccessPath=/upload/**
#file.uploadFolder=/root/uploadFiles/
file.uploadFolder=D://upload/
file.url=/upload/
#配置上传文件的大小
spring.servlet.multipart.max-file-size = 10Mb
spring.servlet.multipart.max-request-size=100Mb
server.servlet.session.timeout = 3600
application-dev.yml:
server:
port: 8081
#修改端口的时候记得把下面url的端口号也改一下
loginUrl: http://localhost:8081/index
wpost: ${server.port}
配置映射config:
package com;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* 图片绝对地址与虚拟地址映射
*/
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
@Value("${file.staticAccessPath}")
private String staticAccessPath;
@Value("${file.uploadFolder}")
private String uploadFolder;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);
}
}
这样就把图片上传到D:upload里面 ,并且用成的地址就可以访问了
附加:
springboot图片映射基于Tomcat的临时存贮文件temp;如果十天不用,上传图片会报错,要在配置文件propertis加入:
server.tomcat.basedir=/home/meducation/temp
例如:http://localhost:8081/upload/3f4fd312-2094-440c-821a-707f477f5508.jpg
注意上传文件的大小这个可以在js 配置也可以在application.properties配置