Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have a single button for upload file

Tags:

html

jquery

Im trying to have a single upload file button without the choose file or submit buttons. I posted the image of my upload file button and the HTML and was wondering if anyone could point me in the right direction. Thanks

<a href="#" class="btn btn-info btn-sm remove">
  <span class="glyphicon glyphicon-upload"></span> Upload File
</a>

enter image description here

like image 737
srsxyz Avatar asked Aug 12 '16 14:08

srsxyz


People also ask

How do I customize my upload button?

Use a label tag and point its for attribute to the id of the default HTML file upload button. By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly).

How do I create a Choose file button in HTML?

The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!


1 Answers

why don't you hide your <input type="file" id="file"> and show only your image button, when someone click your button use this code:

HTML:

<input type="file" id="file" style="display:none;" />
<button id="button" name="button" value="Upload" onclick="thisFileUpload();">Upload</button>

SCRIPT:

<script>
        function thisFileUpload() {
            document.getElementById("file").click();
        };
</script>
like image 108
Arpit Shrivastava Avatar answered Sep 28 '22 13:09

Arpit Shrivastava