왜 파일 판독기가 작동하지 않습니까?

나는 socket.io와 node.js.로 빌드 된 채팅 앱을 가지고있다. 입력에서 파일을 읽고이를 base64 문자열로 서버에 보내는 기능은 다음과 같습니다. 다음과 같이왜 파일 판독기가 작동하지 않습니까?

function readURL() { 
    if (this.files && this.files[0]) { 
     var FR= new FileReader(); 
     FR.onload = function(e) { 
       $("img").attr("src", e.target.result); 
       socket.emit('image', e.target.result); 
       console.log(e.target.result); 
     };  
     FR.readAsDataURL(this.files[0]); 
    } 
};

내 HTML은 다음과 같습니다

<input id="file" type='file' onchange="readURL()"/> 
<img id="img">

을하지만, 파일을 업로드 할 때 아무 일도 발생하지 않습니다. 오류가 기록되지 않으며 콘솔에 아무 것도 기록되지 않습니다. 이게 왜 그렇게? 당신이 보여준 코드가 모든 경우

출처

2016-10-15 Hundotte

NodeJS에서 소켓을 어떻게 들으십니까? –

함수의 범위 안에'this.files'가 없기 때문에 일어날 수 있습니다. – mk12ok

, 다음이 여기 this를 사용하여 수행 당신은 입력의 onchange 방법에서 참조를 전달해야 그것을

를 해결하고 함수에 매개 변수를 추가합니다, 여기 다 el

this은 유효한 자바 스크립트 연산자이므로 원본 코드 단편에서 오류가 생성되지 않습니다.

현재 this에 대한 자세한 내용을보실 수 있습니다 : JavaScript/Reference/Operators/this

function readURL(el) { 
 
    if (el.files && el.files[0]) { 
 
     var FR= new FileReader(); 
 
     FR.onload = function(e) { 
 
       $("img").attr("src", e.target.result); 
 
       socket.emit('image', e.target.result); 
 
       console.log(e.target.result); 
 
     };  
 
     FR.readAsDataURL(el.files[0]); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="file" type='file' onchange="readURL(this)"/> 
 
<img id="img">

출처

2016-10-15 11:03:22 LGSon

고마워요! 잘 돌아갔다. 그러나 파일을 업로드하기 전에 Uncaught TypeError : undefined의 'files'속성을 읽을 수 없습니다. 이렇게하면 이미지가 업로드 될 때까지 앱에서 node.js 명령을 실행하지 못하게됩니다. – Hundotte

을 당신이 잘못 객체에서 선택한 파일에 액세스하고 있습니다. 당신이 다음 "readURL"방법의 파일 개체를 가져 HTML

<input id="file" type='file' onchange="readURL()"/>

아래에있는 경우,이 시도 :

var file = (((this.file || {}).files || [])[0]);

@Hundotte은 .. 당신을 도움이되기를 바랍니다.

출처

2016-10-15 11:36:30 Shivam

왜 파일 판독기가 작동하지 않습니까?

답변

관련 문제