使用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);

    }

巴特西

使用Ajax异步上传文件

最新文章

热门文章