[javascript] Cannot read property 'files' of undefined 오류 질문드려봅니다!

Question

안녕하십니까, C# 및 스크립트 공부를 위해 비쥬얼 스튜디오 입문하여 독학 중인 학생입니다.이미지 업로드 게시판에서 이미지를 업로드 하는데 발생하는 오류에 대해 도움을 받아볼 수 있을까 하여 질문 글을 작성해보게 되었습니다. <input type&#61;&#34;file&#34; id&#61;&#34;img_file1&#34; name&#61;&#34;img_file1&#34; onchange&#61;&#34;addimgfile('1', this);&#34; style&#61;&#34;display:none;&#34;> 먼저 이미지 업로드 html 입니다. 파라미터에 num 값을 전달해 사진 처럼1씩 증가하며 단일 이미지를 최대 3개 까지 올릴 수 있게 만들었습니다.this는 업로드 이미지 미리보기 기능을 위해 사용하였습니다. 문제는 함수에서 업로드 이미지 미리보기 기능을 추가한 이후에첫번째 업로드하는 미리보기 이미지는 잘 보입니다만 2번째 이미지를 업로드를 하려고하면 업로드가 되지않으면서함수의 첫 if 문 조건 [0] 부분에 Uncaught TypeError: Cannot read property 'files' of undefined 에러가 발생 합니다. 미리보기 기능 함수 입니다.function addimgfile(num, input) { if (input.files && input.files[0]) { var reader &#61; new FileReader(); reader.onload &#61; function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } if (input.files && input.files[1]) { var reader &#61; new FileReader(); reader.onload &#61; function (e) { $('#blah2').attr('src', e.target.result); } reader.readAsDataURL(input.files[1]); } input multiple 업로드를 쓰지않고 최대 3개 까지 증가하며 단일 업로드를 하는 input이여서어떻게 함수 수정을 해줘야 1, 2이미지를 업로드해서 각각 blah, blah2, id값에 src값을 전달해 미리보기를 띄워줄 수 있을지 귀중한 시간내어 의견 주시면 정말 감사드립니다.

ssucom · Accepted Answer

<input type&#61;&#34;file&#34; id&#61;&#34;img_file1&#34; name&#61;&#34;img_file1&#34; onchange&#61;&#34;addimgfile('1', this);&#34; style&#61;&#34;display:none;&#34;> onChange 이벤트를 이렇게 인라인으로 작성하시면 원하시는대로 this가 바인딩 되지 않습니다. (꼭 자바스크립트에서의 this 에 대해서 알아보시길 바랍니다.) 그래서 addimgfile 함수의 인자로 넘어온 input 자체가 undefined 이니 &#34;input.files&#34; 에서 에러가 나는 것입니다.( [0] 부분이 아닐 겁니다. ) 인라인으로 onchange 이벤트 걸지 마시고.$('#img_file1').on('change', (e) &#61;> { addimgfile('1', e.target) }); 이렇게 해보셔요

개발입문_@ · Answer

의견 주셔서 감사합니다. 오류와 이미지 src 전달에 꽂혀서 체인지 이벤트 자체를 고려하지 못했네요.많은 공부가 되었습니다. 감사합니다.

[javascript] Cannot read property 'files' of undefined 오류 질문드려봅니다!

2개의 답변

Q&A 목록