文件上传前端大小格式校验

前台html代码

<!--第一步：enctype="multipart/form-data"-->
<form id="addForm" enctype="multipart/form-data">

    <div>
        <label>缩略图:</label> <input type="file" id="file" name="file"
            onchange="getFilesize(this)" />
    </div>

    <!-- 点击保存按钮提交form -->

    <input type="submit" value="保存" />

</form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

input 框的id 要定义为file，才能根据id获取的input框的值，判断文件类型

前台js代码

<script>

    $("#addForm").validate({
            //省略验证   
        submitHandler : function(form) {//验证成功，就提交表单

                 /*第2步：用ajaxSubmit方法提交表单*/ 
                $("#addForm").ajaxSubmit({
                    type : 'post',
                    url : "area/add" , //变量
                    error : function() {//请求失败处理函数  
                        alert("失败");
                    },
                    success : function(data) { //请求成功后处理函数。
                        alert("成功");
                    }
                });

        }
    })

    var fileSize = 0; //文件大小默认为0

    function getFilesize(file) { //如果上传文件，会触发

        /*（1）判断文件后缀类型*/
        var strs = new Array(); //定义一数组     
    //  var pic1 = $("#file").val(); //获取input框的值，文件路径
        var pic1 = $(file).val(); //获取input框的值，文件路径
        strs = pic1.split('.'); //分成数组存储
        var suffix = strs[strs.length - 1]; //获取文件后缀

        if (suffix != 'jpg' && suffix != 'gif' && suffix != 'jpeg'&& suffix != 'png')
        {  
           alert("您选择的不是图片，请上传一个图片");//不是图片，做处理
        }  

        /*(2)获取文件大小，以Kb为单位*/
        fileSize = file.files[0].size / 1024;
        if (fileSize > 10000) {
            alert("您选择的图片太大，请选择小于10M的图片");       
        }  

    }

/* 上传附件的时候，判断附件大小 */
function getFileSize(file) {

    var fileSize = file.files[0].size;

    if (fileSize > 104857600) {
        alert("文件大小不能超过100M，请重新选择文件"); // 提示消息
        $(file).val(""); // 清空已选择的文件

    }

}

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59

后台

@RequiresPermissions("device:create")
@RequestMapping(value = "area/add", method = RequestMethod.POST)
public String addDeviceWithFile(@RequestParam(required = false, value = "file") MultipartFile file){
         //传了文件，做什么处理
    }