jquery file upload 限制上传文件的格式、大小或图片尺寸

限制文件格式、大小

    $("#head").fileupload({
          url: "/front/user/uploadHead",
          dataType: 'json',
          formData: {},
          add: function (e, data) {

              var uploadErrors = [];
              var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;

              //文件类型判断
              if(data.originalFiles[0].type.length && !acceptFileTypes.test(data.originalFiles[0].type)) {
                  uploadErrors.push('请上传gif、jpg、jpeg或png格式的文件');
              }

              //文件大小判断
              if(data.originalFiles[0].size > (2*1024*1024)) {
                  uploadErrors.push('请上传不超过2M的文件');
              }

              if(uploadErrors.length > 0) {
                  alert(uploadErrors.join("\n"));
              } else {
                  data.submit();
              }
          },
          done: function (e, data) {
              //上传完成
          },
      })

 限制图片尺寸

        //上传商品图片
        $("#imgUpload").fileupload({
            url: "/goods/uploadImg",
            dataType: 'json',
            formData: {},
            add: function(e, data) {

                if (!(window.File || window.FileReader|| window.FileList || window.Blob)) {
                    alert('您的浏览器暂不支持图片预览');
                    return;
                }

                //读取图片数据
                var f = data.originalFiles[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    var datas = e.target.result;
                    //获取图片真实宽度和高度
                    var image = new Image();
                    image.onload = function() {
                        var width = image.width;//图片宽
                        var height = image.height;//图片高
                        if (width!=500||height!=500) {
                            alert("请上传宽500px、高500px的图片，当前图片宽度" + width + "px,高度" + height + "px");
                            return;
                        }
                        data.submit();
                    };
                    image.src = datas;
                };
                reader.readAsDataURL(f);

            },
            done: function (e, data) {
                //上传完成
            },
        });

简单介绍下 jquery-file-upload 的使用方法

•  前端代码

<input id="fileupload" type="file" name="file" >

<script>
    $('#fileupload').fileupload({
        dataType: 'json',
        url: "uploadImage",//文件的后台接受地址
        progressall: function (e, data) {
            //上传进度
            var progress = parseInt(data.loaded / data.total * 100);
            console.log(progress+"%"); 
        },
        done: function (e, data){
            //上传完成之后的操作
            var result=data.result;
            console.log(result.path);
        }
    });
</script>

• java代码

    @RequestMapping(value = "/uploadImage")
    @ResponseBody
    public Map uploadImage(@RequestParam(name = "file") MultipartFile file, HttpServletRequest request) throws Exception{
        try {
            
            String filename = file.getOriginalFilename();
            
            String newName = UUID.randomUUID().toString() + "_" + System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));
            
            String path= "/images/goods/" + newName;
            
            String realPath = request.getSession().getServletContext().getRealPath(path);
            
            File img = new File(realPath);
            if (!img.exists() && !img.isDirectory()) {
                img.mkdirs();
            }
            file.transferTo(img);
            
            Map data=new HashMap();
            data.put("path",path);
            return data;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }