当前位置: 首页 > 工具软件 > AjaxUpload > 使用案例 >

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

微生翼
2023-12-01

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

 类似资料: