问如何在墨水文件选择器中限制用户上传图片？
EN

Stack Overflow用户

提问于 2014-06-09 14:29:09

回答 1查看 184关注 0票数 0

我正在使用墨水文件选择器来挑选单个图像。我想限制用户上传图像与宽度100和高度300。如果图像大小不正确，则发送错误消息。如何限制用户？

javascript

asp.net

filepicker.io

回答 1

Stack Overflow用户

发布于 2014-06-09 14:42:45

您可以使用FileReader()和jquery检查图像大小

function readImage(file) {

    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
        image.src    = _file.target.result;              // url.createObjectURL(file);
        image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size/1024) +'KB';
          if(w!=100 || h!=100){
            alert("invalid height or width");

          }

            $('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };      
    };

}
$("#choose").change(function (e) {
    if(this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Multiple image upload with preview by Roko C.B.</title>
</head>
<body>
  <input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

JS BIN示例JSBIN

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24114773

复制

相似问题

问如何在墨水文件选择器中限制用户上传图片？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在墨水文件选择器中限制用户上传图片？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在墨水文件选择器中限制用户上传图片？
EN