HTML5 implementation of previewing local images-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 implementation of previewing local images

不言

Jun 05, 2018 pm 01:39 PM

html5 Picture Preview

This article mainly introduces the relevant information about HTML5 implementation of previewing local images. Friends who need it can refer to the following

Problem description
Suppose we have an image upload control in HTML:

Copy code

The code is as follows:

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

Copy after login

Note that this accept="image/*" is very important, it specifies The uploaded image will be related to the system's pop-up window selection type and other issues when using the mobile terminal, so be sure to add it.
Then, the question is, is there any way to read the content of the image before submitting the form to the server?
It seems simple, they are all client files, so it should be possible, but there was really no good way before, but since the advent of HTML5, this function has come back, and this function can be easily realized through FileReader.
Examples illustrate the problem

Copy code

The code is as follows:

$(function() { 
$(&#39;#upload_image&#39;).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); 
} 
}); 
});

Copy after login

Brief description
Simply speaking, the entire operation is designed as follows:
1. Trigger the event through the change event of and obtain the event object;
2. Obtain the uploaded file through the event object js object file;
3. Generate a usable URL from the file object through the window.URL tool;
4. Put this URL into use;
5.* Release the server of this URL
Key points:
1. For the same file, each time URL.createObjectURL is called, a different URL will be regenerated;
2. When URL.createObjectURL is called, the browser automatically Create space in the memory to serve this URL, which means that this URL can be requested successfully;
3. If URL.revokeObjectURL(imgURL); is called, the server will be turned off, and the URL will be requested again. Will 404;
4. All this is a matter of the client, the server knows nothing about it, including the picture you selected;
5. The imgURL probably looks like this: blob:http:// localhost:8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb

Related recommendations:

Use HTML5 Canvas to create a simple masturbation game

The above is the detailed content of HTML5 implementation of previewing local images. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn