이 글은 주로 로컬 이미지 미리보기의 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('图片大小不能超过 2MB!'); return false; } // !!!!!! // 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL // 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; // 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); // 用这个 URL 产生一个 <img> 将其显示出来 $('body').append($('<img/>').attr('src', 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!