HTML 5 파일 업로드 이벤트

HTML 파일 Api를 사용하여 파일을 업로드하려고하는데 실제로 어떻게해야하는지 모르겠습니다. getImg() 함수에 어떤 이벤트를 부여해야합니까?HTML 5 파일 업로드 이벤트

HTML

<input id='img' type='file' onchange='getImg(event)'/>

function getImg(evt){ 
var files = evt.dataTransfer.files; 
var file = files[0]; 
console.log(file.name)

출처

2011-12-19 Maximilian Lindsey

dataTransfer 객체 & 드래그 드롭 조작이다. 대신 대상을 사용하십시오.

<!DOCTYPE html> 
<html> 
    <body> 
     <input id='img' type='file' onchange='getImg(event)'/> 
     <script> 
     function getImg(evt){ 
      var files = evt.target.files; 
      var file = files[0]; 
      console.log(file.name); 
     } 
     </script> 
    </body> 
</html>

출처

2011-12-19 11:51:59 Maurice

덕분에 많은 도움이되었습니다.이 덕분에 정말 도움이되었습니다. –

이 솔루션에는 한 가지 문제가 있습니다. 이미 파일을 업로드 한 경우 업로드 된 파일을 같은 이름의 다른 파일로 변경 한 다음 변경 이벤트가 발생하지 않습니다. 업로드 된 이미지를 base64 문자열로 읽는 것과 같은 이름 변경 이외의 다른 작업을 원할 경우 문제가됩니다. – teamaster

이 문제를 해결하려면 ID = img 인 입력 값을 $ ('# img')와 같이 getImg (evt) 끝에 ""설정해야합니다. DOM 선택을 위해 Jquery를 사용합니다. – teamaster

HTML 5 파일 업로드 이벤트

답변

관련 문제