Recently wrote the project needs to upload the image function but the browser comes with the button style is not bear to look straight, certainly to be modified, there are many methods on the Internet (self-check ...), I used a trickery method: is the function of the indirect call in the btn when clicked, let it perform the image selection function
Although the code is very simple but the effect is obvious, no longer need to worry about the selector style-casual design
HTML code
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Scripttype= "Text/javascript"src= "Js/choseimage.js" ></Script> <style> . Btn{width:100px;Height:50px;Border-radius:10px;Background-color:#72D5FB;position:Absolute;Top:300px; Left:300px;Outline:None;Border:None; }#choseImage{Display:None; } </style> </Head> <Body> <inputtype= "File"ID= "Choseimage"onchange= "Showpreview (source)" /> <inputtype= "button"class= "Btn"value= "Select Picture"onclick= "Btns ()")/> <Script> functionBtns () {document.getElementById ("Choseimage"). Click (); } </Script> </Body></HTML>
JS Code
function Showpreview (source) { var file = source.files[0]; if (!/image\/\w+/.test (File.type)) { alert ("Make sure the file is an image type"); return false; } if (window. FileReader) { var fr = new FileReader (); Fr.readasdataurl (file); Fr.onload = function (e) { //The action to be performed when the picture is loaded successfully ~ document.getElementById ("Mybgimage"). src = e.target.result; ; }}
HTML Upload pictures Practical tips