'How can I show an image before the file name with a custom upload button?
With the code below I made a custom upload button. It shows an image (upload icon) and then the text "Upload file". After selecting the file it shows only the file name, so no image.
Now my question. How can I show (after selecting the file) another image before the file name? I want to show a retry icon or something, so the visitor knows that he can select another file if needed.
Is this possible and how can I do this?
<div id="upload">
<form action="/upload.php">
<div class="uploadform">
<input type="file" id="myFile" name="filename" accept=".pdf" class="hidden">
<label for="myFile">
<i></i><img src="/upload-icon.png" alt="upload icon" width="32" height="32"> Upload file
</label>
<input type="text" placeholder="Name" name="name" onkeyup="checkForm()">
<input type="text" placeholder="Email" name="email" onkeyup="checkForm()">
<input type="submit" value="Send file" id="uploadButton" disabled="disabled">
</div>
</form>
<script type="text/javascript">
$('#myFile').change(function() {
var i = $(this).next('label').clone();
var file = $('#myFile')[0].files[0].name;
$(this).next('label').text(file);
});
</script>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
