로컬 이미지 미리보기의 HTML5 구현 _html5 튜토리얼 기술

문제 설명
HTML에 이미지 업로드 컨트롤이 있다고 가정합니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

accept="image/*"는 업로드할 이미지가 시스템의 팝업 창 선택 유형 및 기타 모바일 단말기의 문제와 관련이 있음을 지정하는 데 매우 중요합니다.
그럼 질문은, 양식을 서버에 제출하기 전에 이미지의 내용을 읽을 수 있는 방법이 있습니까?
간단해 보이고 모두 클라이언트 파일이므로 가능할 텐데 예전에는 정말 좋은 방법이 없었는데 HTML5가 등장하면서 이 기능이 다시 돌아왔고 FileReader를 통해 이 기능을 쉽게 구현할 수 있게 되었습니다. .
문제를 보여주는 예

코드 복사

코드는 다음과 같습니다.

$(function () {
$('#upload_image').change(function(event) {
// 이
var 파일을 기반으로 파일의 HTML5 js 객체를 가져옵니다. = event.target.files, file;
if (files && files.length > 0) {
// 현재 업로드된 파일을 가져옵니다
file = files[0]// 콘솔에서 이것이 무엇인지 확인하세요.
console.log(file);
// 그런 다음 파일 크기 확인과 같은 작업을 수행할 수 있습니다.
if(file.size > 1024 * 1024 * 2) {
경고('사진 크기는 2MB를 초과할 수 없습니다!');
return false
}
// !!!!!! , 이 파일 개체를 통해 생성 사용 가능한 이미지 URL
// 창 URL 도구 가져오기
var URL = window.URL || window.webkitURL
// 파일을 통해 대상 URL 생성
var imgURL = URL.createObjectURL(file );
// 이 URL을 사용하여 를 생성하고 표시합니다.
$('body').append($('').attr ('src', imgURL));
// 메모리에서 이 URL에 대한 서버를 해제하려면 다음 문장을 사용하세요.
// URL.revokeObjectURL(imgURL); 🎜>}
})
})



간단한 설명

전체 동작 설계는 다음과 같습니다.

1. 의 변경 이벤트를 통해 이벤트를 실행하고 이벤트 객체를 획득합니다. >2. 이벤트 객체를 통해 업로드된 파일의 js 객체 파일을 가져옵니다. 3. window.URL 도구를 통해 파일 객체에서 사용 가능한 URL을 생성합니다.
5.* 릴리스 이 URL 서버의 핵심 사항
:

1. 동일한 파일에 대해 URL.createObjectURL이 호출될 때마다 다른 URL이 다시 생성됩니다. 2. URL을 호출합니다. .createObjectURL을 사용하면 브라우저가 URL을 제공하기 위해 자동으로 메모리 공간을 엽니다. 이는 URL을 성공적으로 요청할 수 있음을 의미합니다.
3. 서버가 이 URL을 다시 요청하면 404가 나타납니다.
4. 이 모든 것은 클라이언트의 문제이며 서버는 선택한 이미지를 포함하여 이에 대해 아무것도 모릅니다. 5. imgURL은 아마도 다음과 같습니다: blob:http://localhost:8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb