使用JQuery插件 Ajaxupload实现文件上传

JQuery插件 Ajaxupload实现文件上传功能时无需创建form表单，就可以通过ajax的方式实现文件上传，功能丰富，可以设置上传之前、上传之后的动作，方便做一些处理工作。Ajaxupload可以实现上传文件时页面无刷新，当选择一个文件之后，就开始了上传动作，不会刷新或跳转页面。

 

使用Ajaxupload，需要下载jquery及Ajaxupload，然后在html页面中引入jquery及Ajaxupload。

 

下面通过一个例子说明Ajaxupload的使用方法。

 

首先创建一个html页面，然后创建div元素用来显示需要上传的文件输入区域，这里创建2个分别上传图片和zip文件，

 

<div id="upload-pic">

       <label>图片:</label>    

       <input type="button" id="uploadImgBtn" name="uploadImgBtn" value="上传图片"/>

       <label>请保证图片符合以下条件：1、小于2M 2、JPG、JPEG格式。</label>

</div>

   

<div id="upload-file">  

       <label> zip文件:</label>

       <input type="button" id="uploadZipBtn" name="uploadZipBtn" value="上传zip文件"/>

       <label>请保证文件符合以下条件：1、小于50M 2、zip格式。</label>

</div>

 

在js代码里设置上传方法：

var uploadBtn= $("#uploadImgBtn");         

if(uploadBtn){   

        /* 上传图片 */

        new AjaxUpload(uploadBtn, {

            action: '/admin/app/photo',

            data : {

               'key1' : "key1",

               'key2' : "key2",

               'key3' : "key3"

            },

            name: 'mypic',

            onSubmit : function(file , ext){

               if (ext && /^(jpg|jpeg)$/.test(ext)){                      

                   uploadBtn.attr('value','上传中...');                  

               } else {

                  alert("只允许上传图片(jpg格式)");

                  return false;           

               }

            },

            onComplete : function(fileName, data){

                    var rst = data.success;                

                    if(rst=='true'){

                        uploadBtn.attr('value','上传成功');                    

                    }else{                     

                        uploadBtn.attr('value','上传失败');

                    }               

             }     

       });

}

action是提交到服务器端的地址，data中设置传到服务器端的属性值，name属性设置服务器端收到的文件名字，onSubmit是文件上传之前的操作，可以判断图片文件的格式，如果不符合要求，停止上传，onComplete是文件上传之后的操作，根据返回值可以判断文件上传成功与否，然后在页面上显示相应信息。

服务器端用java实现，结合springmvc框架，如下：

@RequestMapping(value = "photo", method = { RequestMethod.POST })
@ResponseBody
public String savePhoto(@RequestParam("mypic") MultipartFile file, @RequestParam("key1") String key1, 

　　@RequestParam("key2") String key2, @RequestParam("key3") String key3) throws Exception {
　　JSONObject result = new JSONObject();
　　try {
　　　　if (file == null || file.isEmpty()) {
　　　　　　result.put("status", "empty_file");
　　　　} else {
　　　　　　if (file.getSize() > Constants.MAX_PIC_SIZE) {
　　　　　　　　result.put("status", "error");
　　　　　　　　result.put("message", "您上传的图片太大");
　　　　　　　　return result.toString();
　　　　　　}
　　　　　　//将文件保存到本地文件系统

　　　　　　logger.info("上传图片成功，保存到");
　　　　　　result.put("success", "true");

　　　　　　return result.toString();

　　　　}
　　
　　} catch (Exception e) {
　　　　result.put("status", "error");
　　　　logger.error(e, e);
　　　　return result.toString();
　　}
}

在服务器端可以进一步检查文件类型、大小等，符合要求可以保存到本地，返回成功标准，否则返回失败。

转载于:https://www.cnblogs.com/7mile/p/3156942.html