Use HTML5 to Easily preview images-

The image upload function is implemented on the webpage. After you select an image file, you can easily implement this function through FileReader since HTML5 is available .,. Implement in Web pages Image Upload FunctionAfter you select an image file and want to preview the image on the page, this simple requirement can be implemented a long time ago, later, due to security issues, direct access to local files is forbidden. For a long time, it is impossible to preview the selected image through HTML, this function is back, and can be easily implemented through FileReader.

You only need to listen to the onchange event in the <input type = "file"/> file form element, read the image file through FileReader, and then display the read content in. The sample code is as follows:

Document. getElementById ('file '). onchange = function (evt) {// if the browser does not support FileReader, if (window. fileReader) return; var files = evt.tar get. files; for (var I = 0, f; f = files [I]; I ++) {if (! F. type. match ('image. * ') {continue;} var reader = new FileReader (); reader. onload = (function (theFile) {return function (e) {// img element document. getElementById ('previewimage '). src = e.tar get. result ;};}) (f); reader. readAsDataURL (f );}}

The above figure shows how to use HTML5 to Easily preview images. For more information, see the PHP Chinese website (www.php1.cn )!

Related Articles:

Html5 image uploads support image preview compression and progress display compatible with IE6 and standard browsers

Javascript for image preview and upload (compatible with IE) code sharing

JavaScript advanced (8) JavaScript to implement image preview and import server functions