파일 업로드 중 Javascript를 사용하여 이미지 크기 가져 오기

사용자가 이미지를 업로드 할 파일 업로드 UI 요소가 있습니다. 여기서는 클라이언트 측에서 이미지의 높이와 너비를 확인해야합니다. JS에서 파일 경로 만 갖는 이미지의 크기를 찾는 것이 가능합니까?파일 업로드 중 Javascript를 사용하여 이미지 크기 가져 오기

참고 : 아니요 인 경우 클라이언트 측에서 크기를 찾는 다른 방법이 있습니까?

출처

2010-05-19 Tech Jerk

당신은 당신이의 height 및 width을 읽을 수있는 후 img의 src (로 데이터 URL을 FileReader 인터페이스의 readAsDataURL 기능을 사용하여 할당은 W3C에서 새 File API를 지원하는 브라우저에서이 작업을 수행 할 수 있습니다 영상). 현재 Firefox 3.6은 File API를 지원하고 있으며 Chrome과 Safari가 이미 수행 중이거나 앞으로 진행될 것으로 생각합니다.

브라우저가 (: if (typeof window.FileReader === 'function') 쉽다) 파일 API를 지원하는지 여부를 감지 :

그래서 과도기적 단계에서 당신의 논리는 다음과 같이 될 것이다.
만약 그렇다면 데이터를 로컬에서 읽고 이미지에 삽입하여 크기를 찾으십시오.
아니요, 파일을 서버로 업로드 한 다음 (페이지를 벗어나는 것을 방지하기 위해 iframe에서 양식을 제출 한 것일 수 있음) 서버에 폴링하여 이미지의 크기를 묻습니다 (또는 업로드 한 이미지를 묻는 경우 if 너는 선호한다).

편집 나는 몇 시간 동안 파일 API의 예를 일을 했었어; 여기에 하나 :

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<title>Show Image Dimensions Locally</title> 
<style type='text/css'> 
body { 
    font-family: sans-serif; 
} 
</style> 
<script type='text/javascript'> 

    function loadImage() { 
     var input, file, fr, img; 

     if (typeof window.FileReader !== 'function') { 
      write("The file API isn't supported on this browser yet."); 
      return; 
     } 

     input = document.getElementById('imgfile'); 
     if (!input) { 
      write("Um, couldn't find the imgfile element."); 
     } 
     else if (!input.files) { 
      write("This browser doesn't seem to support the `files` property of file inputs."); 
     } 
     else if (!input.files[0]) { 
      write("Please select a file before clicking 'Load'"); 
     } 
     else { 
      file = input.files[0]; 
      fr = new FileReader(); 
      fr.onload = createImage; 
      fr.readAsDataURL(file); 
     } 

     function createImage() { 
      img = document.createElement('img'); 
      img.onload = imageLoaded; 
      img.style.display = 'none'; // If you don't want it showing 
      img.src = fr.result; 
      document.body.appendChild(img); 
     } 

     function imageLoaded() { 
      write(img.width + "x" + img.height); 
      // This next bit removes the image, which is obviously optional -- perhaps you want 
      // to do something with it! 
      img.parentNode.removeChild(img); 
      img = undefined; 
     } 

     function write(msg) { 
      var p = document.createElement('p'); 
      p.innerHTML = msg; 
      document.body.appendChild(p); 
     } 
    } 

</script> 
</head> 
<body> 
<form action='#' onsubmit="return false;"> 
<input type='file' id='imgfile'> 
<input type='button' id='btnLoad' value='Load' onclick='loadImage();'> 
</form> 
</body> 
</html>

Firefox 3.6에서 훌륭하게 작동합니다. 거기에 라이브러리를 사용하지 않으므로 속성 (DOM0) 스타일 이벤트 핸들러 등에 사과드립니다.

출처

2010-05-19 11:35:41

+1에서 완료되어야한다고 가정합니다. – YOU

예를 들어 주셔서 감사합니다! – Pointy

iOS Safari를 통해 이미지를 업로드하기 전에 이미지의 방향을 확인하기 위해 솔루션을 사용했습니다 (iOS는 업로드하는 동안 많은 exif 데이터를 제거하기 때문에 방향 등). 이미지에 display : none (세로 모드에서 너비와 높이가 혼란 스러울 때)이 있으면 치수가 잘못 표시됩니다. 그것을 해결하는 나의 방법은 그것에게 -10000px 또는 left의 절대적인 위치를주는 것이었다. 어느 쪽이든, 당신의 일에 감사드립니다. 그것은 여분의 많은 두통으로부터 나를 구해 냈습니다. – stafffan

아니요, 파일 이름 및 파일 내용이 서버 본문 본문에 보내지는 수 없습니다. 자바 스크립트는 해당 필드를 조작 할 수 없습니다.

출처

2010-05-19 11:30:15 YOU

다른 방법으로 클라이언트 측에서 크기를 찾을 수 있습니까? –

다른 곳으로 업로드하고 서버에서 확인한 후 아약스로 값을 다시 가져와야합니다 – YOU

플래시가 처리 할 수 있는지 확신 할 수 없지만 자바 애플릿이 처리 할 수 있어야합니다. 또는 html5처럼 보일 수 있습니다. T.J. Crowder의 대답 – YOU

SWFUpload와 같은 업로드 기반 플래시를 사용하는 경우 원하는 모든 정보와 대기중인 여러 개의 업로드를 보유 할 수 있습니다.

SWFUpload를 권장하며 사용자가 아닌 다른 SWFUpload와 연결할 수 없습니다.

실버 컨트롤을 작성하여 파일을 선택하고 업로드 할 수도 있습니다.

출처

2010-05-19 11:55:11

+1 멋지다! – YOU

물론 사용자가 Flash를 허용해야합니다. 플래시를 기반으로 한 모든 광고 때문에 당분간 플래시를 차단하고 있습니다. –

@TJC가 부여되었지만 HTML5가 유비쿼터스가 될 때까지 Flash/ActiveX/Silverlight/XBap 만 이러한 상황에서 실행 가능한 옵션입니다. –

여기서 HTML5가 정확한 해결책입니다. 당신은 항상 과거가 아니라 미래를위한 코드를 작성해야합니다. HTML4 브라우저를 다루는 가장 좋은 방법은 저하 된 기능을 사용하거나 Flash를 사용하는 것입니다 (브라우저가 HTML5 파일 API를 지원하지 않는 경우에만 해당).

img.onload 이벤트를 사용하면 파일의 크기. 내가 작업하고있는 앱에 대한 작업.

출처

2010-08-05 09:56:01

이전 예는 좋아요. 그러나 완벽하지는 않습니다.

var reader = new FileReader(); 

reader.onload = function(e) 
{ 
    var image = new Image(); 

    image.onload = function() 
    { 
     console.log(this.width, this.height); 
    }; 

    image.src = e.target.result; 
}; 

reader.readAsDataURL(this.files[0]);

출처

2012-04-05 10:39:46 Gajus

쿨! 하지만 내 경우에는 JS 업로드 버튼을 두 번째 클릭 후 바로 콘솔에 씁니다. 뭐가 문제 야? –

아, 답변을 찾았습니다 : 요소에 'onclick'이라는 'onchange'이벤트가 있어야합니다. 어쨌든 고주 감사합니다. –

파일 업로드 중 Javascript를 사용하여 이미지 크기 가져 오기

답변

관련 문제