로컬 이미지 미리보기의 HTML5 구현

이 글은 주로 로컬 이미지 미리보기의 HTML5 구현에 대한 관련 정보를 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.

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

코드 복사

코드는 다음과 같습니다.

<input id="upload_image" type="file" name="image" accept="image/*" />

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

코드를 복사하세요

코드는 다음과 같습니다.

$(function() { 
$('#upload_image').change(function(event) { 
// 根据这个 <input> 获取文件的 HTML5 js 对象 
var files = event.target.files, file; 
if (files && files.length > 0) { 
// 获取目前上传的文件 
file = files[0]; 
// 来在控制台看看到底这个对象是什么 
console.log(file); 
// 那么我们可以做一下诸如文件大小校验的动作 
if(file.size > 1024 * 1024 * 2) { 
alert(&#39;图片大小不能超过 2MB!&#39;); 
return false; 
} 
// !!!!!! 
// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL 
// 获取 window 的 URL 工具 
var URL = window.URL || window.webkitURL; 
// 通过 file 生成目标 url 
var imgURL = URL.createObjectURL(file); 
// 用这个 URL 产生一个 <img> 将其显示出来 
$(&#39;body&#39;).append($(&#39;<img/>&#39;).attr(&#39;src&#39;, imgURL)); 
// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 
// URL.revokeObjectURL(imgURL); 
} 
}); 
});

간단한 설명
간략히 전체 작업은 다음과 같이 설계되었습니다.
1. 의 변경 이벤트 및 이벤트 객체를 가져옵니다.
2. 이벤트 객체를 통해 업로드된 파일의 js 객체 파일을 가져옵니다.
3. window.URL 도구를 통해 파일 객체에서 사용 가능한 URL을 생성합니다.
4. 이 URL을 사용하세요.
5. *이 URL의 서버를 해제하세요.
핵심 사항:
1. 동일한 파일에 대해 URL.createObjectURL이 호출될 때마다 다른 URL이 생성됩니다. . URL.createObjectURL이 호출되면 브라우저는 자동으로 이 URL을 제공할 공간을 생성합니다. 이는 이 URL이 성공적으로 요청될 수 있음을 의미합니다.
3. 그 후에 서버가 호출됩니다. 이 URL을 다시 요청하면
4가 발생합니다. 이 모든 것은 클라이언트의 문제이며, 선택한 이미지를 포함하여 서버는 이에 대해 아무것도 모릅니다.
5. BLOB : HTTP%3A // LOCALHOST%3A8000/22CC97D5 -5E46-4D87-9DF4-C3E8C0AA72BB

위 내용은 로컬 이미지 미리보기의 HTML5 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!