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

This article is about how html5 reads local files. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The structure style of html is as follows:

Add Picture

In terms of style, the input box of the input element should not be displayed. At this time, you need to set the input to a transparent style, and then cover it over the button element before you can click the button to upload the picture. If you set the accepted setting to "image / *", only picture files are allowed to upload. Css style

As follows

.addpic {

Position:relative

Margin-left:100px

Width: 95 pixels

Height: 30 pixels

}

.addlogo {

Background: no repetitive scrolling 0 0 rgba (0meme 0re0j0p0pl 0)

Cursor: pointer

Font-size:30px

Opacity: 0

Location: absolutely

Correct: 0

Maximum: 0

Z index: 10

}

Js code

Function readFiles (evt) {

Var files = evt.target.files

If (! Files) {

Console.log ("File compromised")

Return

}

For (var I = 0 files file; file = files [I]; I + +) {

Var imgele = new Image ()

Var thesrc = window.URL.createObjectURL (file)

Imgele.src = thesrc

Imgele.onload = function () {

$("# showlogo") Attr ("src", this.src)

}

}

}

$(document) .ready (function () {

$("# logoimg") Change (function (e) {

ReadFiles (e)

})

})

Thank you for reading! This is the end of the article on "how html5 reads local files". 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!

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.