3
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>

<form id="image-form" action="#" class="w3-container w3-border w3-margin-top">
    <input id="mediaCapture" type="file" accept="image/*,capture=camera" >
    <button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left">
        <i class="material-icons">image</i>
    </button>
</form>

</body>
</html>

The <input> creates a "browse..." button with text "No file selected"

I also have a image icon as a button.

How can I substitute the icon button for browse button?

Once I click the icon button, it will open up the directory to let me choose image.

Thanks for any help.

I am using w3.css framework.

bob
  • 983
  • 11
  • 21
Patrick
  • 293
  • 1
  • 5
  • 14
  • Please create a Plunker or JSFiddle example of your code. Thanks. – Tome Pejoski Nov 15 '16 at 22:54
  • 1
    This link is bootstrap specific but you may be able to adapt it to your needs: https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 – nurdyguy Nov 15 '16 at 22:57
  • make your input file's visibility zero and place it over the button using absolute positioning. Also set its dimensions same as the button's. – Lucky Soni Nov 15 '16 at 23:32

2 Answers2

1

By setting the input element's display property to hidden, you can still trigger the file selection process by clicking on the label element. Place your icon inside the label and style accordingly.

Make sure the for attribute of the label element matches the id of the file input

<style>
  .hidden {display:none;}
</style>
<label for="mediaCapture">
  <i class="material-icons">image</i>
</label>
<input type="file" class="hidden" id="mediaCapture">
bob
  • 983
  • 11
  • 21
0

Setting the input element's display property to hidden, then setting the button element's click event to trigger the input element's click event.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>

<form id="image-form" action="#" class="w3-container w3-border w3-margin-top">
    <input id="mediaCapture" type="file" accept="image/*,capture=camera" style="display: none;">
    <button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left">
        <i class="material-icons">image</i>
    </button>
</form>
<script src="jquery.js"></script>
<script>
    $('#submitImage').on('click', function(){
        $('#mediaCapture').trigger('click');
    });
</script>
</body>
</html>
ywDing
  • 61
  • 2