如何限制用戶上傳墨水文件選擇器中的圖像？

我正在使用墨水文件選取器來選取單個圖層。我想限制用戶上傳寬度爲100，高度爲300的圖片。如果圖片尺寸不正確，請發送錯誤信息。如何限制用戶？如何限制用戶上傳墨水文件選擇器中的圖像？

2014-06-09 Piya

您可以使用和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

來源

2014-06-09 06:42:45

如何限制用戶上傳墨水文件選擇器中的圖像？

回答

相關問題