Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > HTML5 reads local file sample code_html5 tutorial skills

HTML5 reads local file sample code_html5 tutorial skills

WBOY
Release： 2016-05-16 15:47:59
Original
1667 people have browsed it

The html structure style is as follows:

Copy code
The code is as follows:









In terms of style, the input box of the input element should not be displayed. In this case, the input needs to be set to a transparent style, and then covered over the button element. Only then can the button be clicked to upload the image. . Set accepted to "image/*" to allow only image files to be uploaded.

Css style is as follows

Copy code
The code is as follows:

.addpic{
position:relative;
margin-left:100px;
width:95px;
height:30px;
}
.addlogo {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
font-size: 30px;
opacity: 0;
position: absolute;
right: 0 ;
top: 0;
z-index: 10;
}

js code

Copy the code
The code is as follows:

function readFiles(evt){
var files=evt.target.files;
if(!files){
console.log("the file is invalid");
return;
}
for(var i=0, 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);
}
}
}


Copy the code
The code is as follows:

$(document).ready(function(){
$("#logoimg").change(function(e ){
readFiles(e)
});
});
Related labels：
html5
source：php.cn
Previous article：html5 menu origami effect_html5 tutorial skills Next article：Example of implementing canvas shadow effect in html5_html5 tutorial skills
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
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template