Javascript html file input with an image

Categorías: 

Etiquetas: 

  • Javacript
function getFile() {
    document.getElementById("file-input-image").click();
}
function sub(obj) {
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("file-input-text").innerHTML = fileName[fileName.length - 1];    
    return false;
}
  • HTML (Bootstrap css used)
<div id="file-btn" class="btn btn-info" onclick="getFile()">
    <i class="fa fa-camera fa-lg"></i> <span id="file-input-text">Upload picture</span>
</div>
<div class="hidden">
    <input id="file-input-image" name="file-input-image" type="file" value="upload" onchange="sub(this)"/>
</div>