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

来源:互联网 发布:mix软件 编辑:程序博客网 时间:2024/06/05 09:08

用的编译器是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")+"/";

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

这里写图片描述
这里写图片描述