Shulou(Shulou.com)06/03 Report--

This article is about how to use H5 to upload local images and preview functions. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Recently, H5 is required to upload and display pictures, as shown in the figure:

Go directly to the code:

Html part

Add a work

I use css to set input [type=file] to opticy:0; so that it looks more like a native upload.

Var addWork = {add: function (btn, figure_box) {var figureBox = document.getElementById (figure_box); / / get the p element var input = document.getElementById (btn) that displays the image; / / get the input element of the selected image / / this side is to determine whether this browser supports this API. If (typeof FileReader = = 'undefined') {alert ("browser version is too low, please update your browser first ~"); input.setAttribute (' disabled', 'disabled');} else {input.addEventListener (' change', readFile, false); / / listen for change events if supported, and run the readFile function once the change is made. } function readFile () {var file = this.files [0]; / get the file object / / determine whether the type of file is an image type. If (! / image\ /\ w+/.test (file.type)) {alert ("Please upload a picture ~"); return false;} var reader = new FileReader (); / / declare a FileReader instance reader.readAsDataURL (file) / / call the readAsDataURL method to read the selected image file / / finally, in the onload event, get the contents of the file successfully read and display the selected image reader.onload = function (e) {/ / create a new picture and text input var figure = $('my head) by inserting an img node.

'); figure.appendTo (figureBox);}} Thank you for reading! On "how to use H5 to upload local pictures and preview function" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.