使用Ajax异步上传文件

之前上传文件都是用表单form设置post请求和enctype类型：

<form id="upload_form"action="" method="post" enctype="multipart/form-data">

提交按钮是一个submit类型的input，提交给后台进行处理。现在记录一下使用Ajax上传文件的步骤。

1.如果需要上传的文件域还是在一个表单中，但是该表单没有使用submit提交。

那么推荐使用Ajax表单插件（jquery.form.js），这款插件直接就支持文件的上传。我们直接使用它的ajaxForm方法即可(不要忘了引入这个插件)：

            $('#btn').click(function(){
                $('#upload_form').ajaxForm({
                   beforeSubmit:function(){
                               var file=$("#file")[0].files[0];
                               if(file==null){
                                   return false;
                               }
                            var filesize = file.size/1024/1024;
                            if(filesize > 10){
                                console.log('文件大小超过限制,最多10M');
                                return false;
                            }
                        },
                    uploadProgress: function(event, position, total, percentComplete) {//上传的过程
                        //position 已上传了多少
                        //total 总大小
                        //percentComplete已上传的百分数
                    },
                    success: function(data) {
                    },
                    error:function(err){//失败
                    }
                });

            });

btn就是一个普通的button，upload_form是这个表单的id，file是文件域的id。我在beforeSubmit回调函数里判断上传文件的大小，如果大于10M不允许上传，uploadProgress回调函数中可以得到当前上传的进度信息。

还有更多的回调函数可以参看该插件的文档：https://github.com/jquery-form/form

2.如果上传域不在一个表单中，我们可以使用formdata对象来处理：

　　　　　　　 var formData = new FormData();
                var name = $('#user_id').val();
                formData.append("lunwen",$("#file")[0].files[0]);
                formData.append("userId",name);
                $.ajax({ 
                    url : '', 
                    type : 'POST', 
                    data : formData, 
                    // 告诉jQuery不要去处理发送的数据
                    processData : false, 
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType : false,
                    beforeSend:function(){
                        console.log("正在进行，请稍候");
                    },
                    success : function(responseStr) {console.log("error")}
　　　　　　　　　　　　error : function(responseStr) { console.log("error"); } });

file依然是文件域,我们还可以将其他的数据都append进formData对象中

最后，我在这里贴一个后台Controller处理文件上传的代码：

    @ResponseBody
    @RequestMapping(value="/updateInfo",method=RequestMethod.POST)
    public boolean updateStudentInfo(User user,
            @RequestParam(value="portrait",required=false)MultipartFile portrait,HttpServletRequest request) {
        if(portrait!=null&&portrait.getSize()>0) {
            if(portrait.getSize()>(10*1024*1024)) {
                return false;
            }
            String filename=portrait.getOriginalFilename();
            String dbPath=request.getServletContext().getContextPath()+"/portrait/"+user.getUserId();
            String basePath=request.getServletContext().getRealPath("/portrait/"+user.getUserId());
            new File(basePath).mkdir();
            File portraitFile=new File(basePath,filename);
            try {
                portrait.transferTo(portraitFile);
                user.setUserPortrait(dbPath+"/"+filename);
                return userService.updateUserInfo(user);
            } catch (Exception e) {
                e.printStackTrace();
            } 
            
        }
        return userService.updateUserInfo(user);
    }