Question

我试图限制上传不符合我们规格的图片的能力。它似乎在很大程度上起作用，但是，如果它无效，我似乎找不到停止（或删除）实际上传的方法。我在jquery中不是太强大所以我可能错过了一些东西。任何帮助将不胜感激。

HTML：<input type="file" id="file" />

使用Javascript：

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
    var file, img;
        var iSize = ($("#file")[0].files[0].size / 1000);


    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            if(this.width !== 300 && this.height !== 300 || iSize >= 500){
            alert("Image needs to be 300x300px. The submitted file was "+this.width + "x" + this.height + "px and " + iSize + "kb." + "Please try a different image." );
          img.src = _URL.createObjectURL(file);

          } else {
            alert(this.width + "x" + this.height + "px and "+ iSize +"kb. Your image meet the requirements");

            }
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };

    }

});

Answer 1

$(function () {
       var _URL = window.URL || window.webkitURL;
        $("#file").change(function (e) {
            var self = $(this);
            var file, img;
            if ((file = this.files[0])) {
                img = new Image();
                img.onload = function () {
                    var size = parseFloat(self[0].files[0].size / 1024);
                    var height = this.height;
                    var width = this.width;
                    console.log("Size is in KB " + size);
                    console.log("Height: " + height);
                    console.log("Width: " + width);
                    if (size > 100) { 
                      self.val(''); 
                      }
                };
                img.src = _URL.createObjectURL(file);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" />

按大小和尺寸限制上传无效图像

1 个答案: