ajax(jquery.form.js)+springMVC+MultipartFile实现文件图片上传

SpringMVC+AJAX+MultipartFile 异步上传图片在很多博客上基本上都有写，但是基本都是东缺一块西缺一块的，调这东西调了很久，总算成功解决了。。。（网上看到有用ajaxfileupload.js这个插件，跟着写了下但是没成功，找了很久也没找到原因就放弃了。这里用的是jquery.form.js插件的ajaxSubmit()方法，网上有很多，可以去下载)

下载地址：http://malsup.github.com/jquery.form.js

前端：

        //jquery.form.js提交
       function testaddedit(){
            console.log("*****");
            $("#upload_form").ajaxSubmit({
                   type: "POST",
                   url: path + "/system/editimg.php",
                   dataType: "json",
                    success: function(data){
                   var json = $.parseJSON(data);//把字符串转化为json对象
                     filepath = result.imgpath;
                   console.log(filepath);
                   },
                   error: function(){
                        alert("请链接网络");
                    }
            });

}

后台：

        // 该方法可以接受post和get两种提交方式
   @RequestMapping(value="/editimg.php",method={RequestMethod.GET,RequestMethod.POST})
   public @ResponseBody String editimg(@RequestParam(value="file_upload2", required=false) MultipartFile file,HttpServletRequest request,Model model) throws FileNotFoundException, IOException{
       //E:\apache-tomcat-8.5.23\webapps\hsds_shuadan\
       String brProjectPath = request.getSession ().getServletContext ().getRealPath ("/");
        System.out.println(brProjectPath+"(((((");
       IData data = new DataMap();
       if( file != null && !file.isEmpty() ){
           System.out.println(777);
           savePicture(file, request,data);//保存图片
       }else{
           System.out.println("file不存在！");
       }
//       model.addAttribute("data",data);
       JSONObject jsonData = new JSONObject();
       jsonData.put("imgpath", data.getString("imagePath"));
       //dictService.initDict(request.getServletContext());
       return jsonData.toJSONString();
   }

表单：

</form>

将上传图片保存到服务器：

    //文件保存到服务器上
    protected void savePicture(MultipartFile file, HttpServletRequest request,IData data)
            throws IOException, FileNotFoundException {
       String ImagePath = request.getSession().getServletContext().getRealPath("/imgupload");
       System.out.println(ImagePath);
        String fileName = file.getOriginalFilename();
        String task_id = request.getParameter("task_id");
        String imgpath = "/imgupload/"+fileName;
        data.put("fileName", fileName);
//      data.put("imagePath", ImagePath+"\\"+fileName);
        data.put("imagePath", imgpath);
        System.out.println(imgpath);
        data.put("task_id", task_id);
        File targetfile = new File(ImagePath, fileName);
        Date date = new Date(System.currentTimeMillis());
        if(targetfile.exists()){
            String[] s = file.getOriginalFilename().split("\\.");
            s[0] += date.getTime();
            targetfile = new File(ImagePath, s[0] + "." + s[1]);
        }
        InputStream ins = file.getInputStream();
        FileOutputStream fos = new FileOutputStream(targetfile);

        byte b[] = new byte[1024];
        int temp = 0;

        while((temp = ins.read(b)) != -1){
            fos.write(b, 0, temp);
        }

        fos.close();
        ins.close();

}

以上就是将表单文件异步提交存到服务器的完整流程，因为耗时有点多所以就记录下来加深下记忆，同时也希望可以帮到遇到同样问题的大家！

ajax(jquery.form.js)+springMVC+MultipartFile实现文件图片上传

猜你喜欢