上传前验证多个图像大小

时间:2016-07-02 14:00:23

标签: jquery image validation

我有代码上传多个图片如果图片大小无效则不显示onload但是点击提交按钮上传到服务器我希望该图片不上传服务这里是mycode

$("#files").on("change", function (e) {
        var files = e.target.files,
        filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            $('#img_valid').css('display', 'none');
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function (e) {
               var file = e.target;
                    var img = new Image();
                    img.src = e.target.result;
                    var res = null;
                    img.onload = function() {                        
                    if(this.width > 500 && this.height > 500){
                                    $("<img></img>", {
                                class: "imageThumbShow",
                                src: e.target.result,
                                title: file.name
                            }).insertAfter("#files");
                    }
                    else{            
                        $('#img_valid').css('display', 'block');
                        $('#img_valid').html("Image  height width must be min 400px.")
                        return false;
                    }
                    }
            });
            fileReader.readAsDataURL(f);
        }
    });

这里是jquery代码

{{1}}

我想从文件[]数组中删除无效大小的图像,然后再上传其他图像

2 个答案:

答案 0 :(得分:0)

您可以使用DropzoneJS上传文件(图片),DropzoneJS有很多选项。其中一个选项是&#34; maxFilesize&#34;允许您限制图像大小。

答案 1 :(得分:0)

试试这个

<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
            if (typeof ($("#fileUpload")[0].files) != "undefined") {
                var size = parseFloat($("#fileUpload")[0].files[0].size / 1024).toFixed(2);
                alert(size + " KB.");
            } else {
                alert("This browser does not support HTML5.");
            }
        });
    });
</script>