你好,我现在做的程序是如果点击提交按钮,就会把表单的数据上传数据。如果点击选择上传图片按钮,就会自动弹出文件选择框,选择完图片后,就上传图片到对应的文件夹。
但是问题是点击提交按钮,也就是第一个按钮,就没反应。点击上传图片按钮,就显示404错误,这是为什么。
我用的是Springboot+Mybatis+Thymeleaf+Redis框架。怎么办?我不会JavaScript,不会js,感觉js很难,学不会,就放弃了js。只会html+css,不会js,放弃js。
这是HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
label
{
display: inline-block;
width: 120px;
text-align: justify;
text-align-last: justify;
margin-right: 10px;
}
</style>
</head>
<body>
<form id="form" th:object="${Cangpin}" method="post" enctype ="multipart/form-data">
<label>序号</label>
<input type="text" id="xuhao" name="序号" th:field="*{xuhao}"></input><br>
<label>图片路径</label>
<input type="text" id="path2" name="图片路径" th:field="*{path2}"></input><br>
<label>系列</label>
<input type="text" id="sys" name="系列" th:field="*{sys}"></input><br>
<label>藏品名称</label>
<input type="text" id="cangpinname" name="藏品名称" th:field="*{cangpinname}"></input><br>
<label>原价</label>
<input type="text" id="yuanjia" name="原价" th:field="*{yuanjia}"></input><br>
<label>现价</label>
<input type="text" id="xianjia" name="现价" th:field="*{xianjia}"></input><br>
<label>数量</label>
<input type="text" id="num" name="数量" th:field="*{num}"></input><br>
<label>总数量</label>
<input type="text" id="totalnum" name="总数量" th:field="*{totalnum}"></input><br>
<label>图标路径</label>
<input type="text" id="icon" name="图标路径" th:field="*{icon}"></input><br>
<label>公司或个人</label>
<input type="text" id="company" name="公司或个人" th:field="*{company}"></input><br>
<label>类型</label>
<input type="text" id="type2" name="类型" th:field="*{type2}"></input><br>
<label>起始时间</label>
<input type="text" id="began" name="起始时间" th:field="*{began}"></input><br>
<input type="submit" id="sub" formaction="@{/insertcps}" formmethod="post"></input>
<button type="submit" id="pic" formaction="@{/upload}" formmethod="post">上传图片</button>
</form>
</body>
</html>
这是Controller部分代码
@Controller
public class Controller1{
@Resource
Redis redis;
@RequestMapping("/querycp")
@ResponseBody
public Model getCangpin(Model mp){
mapper mapper2=getCangpinArr.getCangpinMap();
ArrayList<Cangpin> cp=new ArrayList<Cangpin>();
cp=mapper2.Cangpin();
return mp;
}
@CrossOrigin
@RequestMapping(value = "/insertcps")
@Cacheable(cacheNames = "Cangpins",key = "#cp.xuhao")
@ResponseBody
public ArrayList<Cangpin> lock(Cangpin cp){
redis.delAll();
ArrayList<Cangpin> cps=new ArrayList<Cangpin>();
mapper mapper2 = getCangpinArr.getCangpinMap();
cps=mapper2.Cangpin();
cps.add(cp);
mapper2.addCangpin(cp);
return cps;
}
@RequestMapping("/insertcp")
@ResponseBody
public Model insert(Model mp){
mp.addAttribute("Cangpin",new Cangpin());
return mp;
}
@RequestMapping("/upload")
public @ResponseBody String upload(@RequestParam MultipartFile file, HttpServletRequest request,String uploadPath){
String a=FileChoosen.upload(file, request, "D:\\puks");
System.out.println(a);
return a;
}
这是上传文件部分的代码
public class FileChoosen {
public static String upload(MultipartFile file, HttpServletRequest request, String uploadPath){
if(!file.isEmpty()){
// 如果目录不存在则创建
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
String OriginalFilename = file.getOriginalFilename();//获取原文件名
String suffixName = OriginalFilename.substring(OriginalFilename.lastIndexOf("."));//获取文件后缀名
//重新随机生成名字
String filename = UUID.randomUUID().toString() +suffixName;
File localFile = new File(uploadPath+"\\"+filename);
try {
file.transferTo(localFile); //把上传的文件保存至本地
return filename;//上传成功,返回保存的文件地址
}catch (IOException e){
e.printStackTrace();
System.out.println("上传失败");
return "";
}
}else{
System.out.println("文件为空");
return "";
}
}
}
其他部分的代码我试过,都是正确的,没有问题,这里就不打出来了。
我的思路是用文件选择器选择图片,然后将图片保存在项目的static目录下的某一目录,数据库存的是该文件在static目录下的位置。
怎么实现。感觉这很难。尤其是我不会JS,JavaScipt,感觉没法做。