html 입력 태그의 파일을 참조하는 방법

Question

<input type="file"> 태그가있는 간단한 양식이 있다고 가정하면 사용자가 파일을 선택하고 나면 해당 파일을 표시하고 싶습니다. img)을 볼 수 있습니다. 더 나은 사용자 경험.

은 onChange 이벤트를 기반으로 값을 설정하려고 시도했지만 작동하지 않음을 알았습니다.

의견이 있으십니까?

Answer 1

브라우저 샌드 박스에서 클라이언트의 파일 시스템에 액세스 할 수 없습니다. 그것은 브라우저의 보안 모델에 위배됩니다. 파일을 표시하려면 먼저 사용자가 파일을 업로드 할 때까지 기다려야합니다.

Answer 2

유일한 방법은 onChange 이벤트를 catch하고 Ajax를 사용하여 파일을 업로드하는 것입니다 (비동기식으로).

힌트 : onChange 이벤트에 양식을 제출하고 서버 측 스크립트로 게시물 데이터를 보냅니다.

이 기술은 많은 웹 사이트에서 사용되지만 클라이언트의 연결 속도가 느리고 파일 크기가 클 경우 속도가 느려집니다. 행운을 빕니다!

Answer 3

이미지를 업로드하기 전에 업로드해야합니다. 트릭을 수행 할 JQuery 스 니펫은 다음과 같습니다.

$('input:file').change(function(){ 
    var file = this.files[0]; 
    var reader = new FileReader(); 
    reader.onload = (function(event) { 
    $('#previewImage').attr('src',event.target.result); 
    }); 
    reader.readAsDataURL(file); 
});