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

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

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

前端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 = json.imgpath;//filepath方法外有定义
                         console.log(filepath);
                    },
                    error: function(){
                        alert("请链接网络");
                    }
            });

        }

表单:

        <form id="upload_form" name="upload_form" >
            <table  class="table-border1" style="width: 100%;">
                <tr>
                    <td class="th" style="width: 100px; line-height: 30px;">图片一:</td>
                    <td class="td">
                        <input id="file_upload2" name="file_upload2" class="easyui-filebox" style="width:300px" data-options="buttonText:'浏览',onChange:change_photo,prompt:'请选择一个文件...' " />
                          <input type="button" value="提交" οnclick="testaddedit();"/> <br/>
                    </td>
                </tr>
            </table>
        </form>


后台接受处理:

        // 该方法可以接受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();
    }

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

    //文件保存到服务器上
    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();
    }

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





  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值