1. 파일 API
HTML5는 파일 및 파일 정보를 읽고 파일을 읽을 수있는 파일과 Filereader의 두 가지 방법을 제공합니다.
2. 예
<html> <body> <div id = "test-image-preview"style = "style ="테두리 : 1px solid rgb (204, 204, 204); 너비 : 100%; 높이 : 200px; 배경 크기 : 배경 반복 : no-repeat; background; "> "> "> </div> <br id ="</div. type = "file"id = "test-image-file"> <script type = "text/javaScript"> var fileInput = document.getElementByID ( 'test-image-file'), info = document.getElementById ( 'test-file-info'), preview = document.getElemage-preview '); fileInput.adeventListener ( 'change', function () {// 배경 이미지 : preview.style.backgroundimage = ''; // 파일이 선택되었는지 확인하십시오 : if (! fileInput.value) {info.innerhtml = '파일 없음'; return;} // var get get info.files [0]; 'file.name +'<br> ' +'size : ' + file.size +'<br> ' +'modified : ' + file.lastModifiedDate; } // var reader = filereader () {var data = e.target.result; reader.readasdataurl (file);}); </script> </body> </html>DataUrl 형식으로 읽은 파일은 데이터와 유사한 문자열입니다. image/jpeg; base64,/9j/4aaqsk ... (Base64 인코딩) ...
일반적으로 이미지를 설정하는 데 사용됩니다. 서버 측 처리가 필요한 경우 String Base64와 다음 문자를 서버로 보내고 Base64로 디코딩하여 원본 파일의 이진 내용을 가져옵니다.
3. 설명
위의 코드는 또한 단일 스레드 실행 모드 인 JavaScript의 중요한 기능을 보여줍니다. JavaScript에서, 브라우저의 JavaScript 실행 엔진은 JavaScript 코드를 실행할 때 항상 단일 스레드 모드로 실행됩니다. 즉, 언제든지 JavaScript 코드가 동시에 1 스레드 이상을 실행하는 것은 불가능합니다.
단일 스레드 모드에서 멀티 태스킹을 처리하는 방법을 물어볼 수 있습니까?
JavaScript에서는 멀티 태스킹이 실제로 위의 코드와 같이 비동기식으로 호출됩니다.
reader.readasdataurl (파일);
파일 내용을 읽기 위해 비동기 작업이 시작됩니다. 비동기 조작이기 때문에 작업이 JavaScript 코드로 언제 끝나는 지 알 수 없으므로 먼저 콜백 기능을 설정해야합니다.
reader.onload = function (e) {// 파일을 읽을 때이 함수는 자동으로 호출됩니다.};파일 읽기가 완료되면 JavaScript 엔진은 자동으로 설정 한 콜백 기능을 호출합니다. 콜백 함수가 실행되면 파일을 읽으므로 콜백 함수 내에서 파일 내용을 안전하게 얻을 수 있습니다.
JS 업로드 파일의 미리보기의 위의 간단한 예제는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.