이미지 클라이언트 측의 치수 유효화

Question

내가 작업하고있는 웹 사이트에는 이미지를 업로드 할 수있는 옵션이 있지만 서버 측에 업로드하거나 제출하기 전에 이미지의 크기 (너비, 높이)의 유효성을 검사해야합니다.

예를 들어, 이미지, 250x250 크기해야합니다 그렇지 않으면 경고가 발생하여 사용자가 이미지를 업로드 할 수 없습니다, 여기 내 코드의 일부입니다 :

<form action="upload_file.php" method="post" enctype="multipart/form-data" name = "upload" id="insertBook" onSubmit="return validateImage();"> 
    <input type="file" name="image" value="upload" id = "myImg"> 
    <input type="submit" name = "submit">   
</form> 

validateImage 기능은 이제 단지 확장에 확인 , I 그것도 차원을 확인하고 싶습니다.

여기에 지금까지 코드입니다 :

function validateImage(){ 
    var allowedExtension = ["jpg","jpeg","gif","png","bmp"]; 
    var fileExtension = document.getElementById('myImg').value.split('.').pop().toLowerCase(); 
    var isValidFile = false; 
    for(var index in allowedExtension) { 
     if(fileExtension === allowedExtension[index]) { 
      isValidFile = true; 
      break; 
     } 
    } 
    if(!isValidFile) { 
     alert('Allowed Extensions are : *.' + allowedExtension.join(', *.')); 
    } 
    return isValidFile; 
} 

감사합니다! :)

Answer 1

function validateImage(){ 
    var isValidFile = false; 
    var image = document.getElementById('myImg'); 

    var allowedExtension = ["jpg","jpeg","gif","png","bmp"]; 

    var srcChunks = image.src.split('.'); 
    var fileExtension = srcChunks[ srcChunks.length - 1 ].toLowerCase(); 

    if (image.width !== image.height !== 250) { 
     console.log('Size check failed'); 
     return false; 
    } 

    for(var index in allowedExtension) { 
     if(fileExtension === allowedExtension[index]) { 
      isValidFile = true; 
      break; 
     } 
    } 

    if(!isValidFile) { 
     alert('Allowed Extensions are : *.' + allowedExtension.join(', *.')); 
    } 

    return isValidFile; 
} 

Answer 2

Related to this topic

내 의견에 말했듯이, 당신은 클라이언트 측의 크기를 확인할 수 있지만 자바 스크립트가 우회 될 수 있으므로 안전하지 않은, 그리고 당신의 유효성 검사가 어떠한 목적도 수행하지 않습니다. 누군가 5Go 파일을 정말로 업로드하고 싶다면 체크 기능을 재정의해야합니다.

클라이언트에서 서버 쪽 유효성 검사에 액세스 할 수 없습니다. 또한 백엔드 및 이미지 처리 (단순한 파일처럼 취급하고 있습니까, 아니면 이미지로 작업 할 수있는 lib가 있습니까?)에 따라 이미지 크기에 도움이되는 몇 가지 방법을 찾을 수 있습니다. 예를 들어 파이썬에서는 이미지 정보, 크기, 치수, 내용을 확인하기 위해 PIL (3.x 버전의 베개)을 사용합니다. 실제 파일인지 아닌지를 확인합니다. 실제로는 일부 파일이 포함 된 손상된 파일을 업로드하는 것이 쉽습니다 PHP 코드 (예 :)를 사용하여 사용자가 서버에 컨텐츠를 업로드 할 때 매우주의해야합니다.