文件、图片的上传（一）-----前端与后端代码

用的编译器是idea，前端代码在jsp页面中，后端则是写在SSM框架中控制层Controller。

前端代码（jsp页面）

<form action="${website}file/file/${id}" method="post" enctype="multipart/form-data">
<input type='text'  name='textfield' id='textfield' class='txt' />
<input type="file" name="file" class="file" id="fileField"
size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit"  name="submit" class="btn" value="上传" />

</form>

需要注意的是，form表单后面一定要加上

enctype="multipart/form-data"

前端页面展示：


点击浏览，找到本地图片：



选择打开，或双击，图片名称就显示在文本框中，点击上传，即可将图片上传到服务器中，并将图片的相关信息存储在数据库中。

后端代码具体如下：

@RequestMapping(value = "/file/{id}", method = RequestMethod.POST)
public String upload( @PathVariable("id") int id , @RequestParam("file")CommonsMultipartFile file, HttpServletRequest request, ModelMap model, RedirectAttributes redirectAttributes) throws Exception {
//获得原始文件名
String filename = file.getOriginalFilename();
System.out.println("原始文件名："+ filename);
String newFileName =  UUID.randomUUID()+ filename;
//       UUID.randomUUID()局唯一标识符,是指在一台机器上生成的数字，它保证对在同一时空中的所有机器都是唯一的，
ServletContext sc = request.getSession().getServletContext();
String path = sc.getRealPath("image")+"/";
File f = new File(path);
if(!f.exists()){
f.mkdirs();
}
if (!file.isEmpty()){
try{
FileOutputStream fos = new FileOutputStream(path+newFileName);
InputStream in = file.getInputStream();
int b = 0;
while((b = in.read())!=-1){
fos.write(b);
}
fos.close();
in.close();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
redirectAttributes.addAttribute("id",id);
model.addAttribute("msg","上传成功！");
com.pandawork.common.entity.File file1 = new com.pandawork.common.entity.File();
String name = "../../image/"+newFileName;
file1.setName(name);
file1.setVisible(0);
fileService.addImage(file1);
return "fileUpload";
}

如果图片没有上传到你想要的目录，你需要修改idea中默认的文件上传路径。但是，怎么修改呢，这是个问题。

自己尝试了各种方法也没有实现自己想要的结果，后来询问了学长，知道了想要修改idea中文件上传到的路径很简单。



将此处路径改为你需要的路径即可。

String path = sc.getRealPath("image")+"/";

在后端代码的这部分，如果你想上传的文件夹下没有image文件夹，则会自动创建image文件夹，如果想在image文件夹下另外再建一个名为memberImage的子文件夹，则只需将代码改为

String path = sc.getRealPath("image/memberImage")+"/";

最后截了两张关于文件上传的图片