thank taking @ question.
i asked question similar before hand @ link below. unfortunately, answer given works in code snippet not on site. created blank html document , inserted following code it. basics of i'm trying this. file input tag hidden using css. i'm using label tag take on control of input tag. once file selected want file name (not path) displayed within label , keep image visible user well. stated in last question not wish use jquery. in advance taking @ code , helping out!
heres previous question: how change html label text once file has been selected using javascript
heres code in 'index2.php' file:
<html> <head> <script> var profilepic = document.getelementbyid('profilepic'); /* finds input */ function changelabeltext() { var profilepicvalue = profilepic.value; /* gets filepath , filename input */ var filenamestart = profilepicvalue.lastindexof('\\'); /* finds end of filepath */ profilepicvalue = profilepicvalue.substr(filenamestart + 1); /* isolates filename */ var profilepiclabeltext = document.queryselector('label[for="profilepic"]').childnodes[2]; /* finds label text */ if (profilepicvalue !== '') { profilepiclabeltext.textcontent = profilepicvalue; /* changes label text */ } } profilepic.addeventlistener('change',changelabeltext,false); /* runs function whenever filename in input changed */ </script> </head> <body> <div class="changepic-wrap"> <form action="changepicauth.php" method="post"> <input type="file" name="profilepic" id="profilepic" class="inputfile"> <br> <label for="profilepic"> <img src="#" /> upload picture... </label> <br> <div class="button-wrap"> <button>change picture</button> </div> </form> </div> </body> </html>
place <script>...</script> @ end of document, before </body>.
that way, of dom have loaded , won't need listen onload or ondomcontentloaded event.
Comments
Post a Comment