Andrew O Neill Andrew O Neill - 1 month ago 7
HTML Question

How to access file upload selected file without changing page using javascript?

I need to create a file upload field which I have below:

<div class="col-xs-4 col-md-4 form-group">
<label for="file-upload" >File Upload</label>
<input type="file" id="file-upload"/>
</div>


How do I access the contents of the selected file without going to another page or adding anything to the URL in Javascript?

Answer

Use this simple code

var inputFile = document.getElementById("file-upload");

inputFile.addEventListener("change", function(){
    var files = inputFile.files;
    console.log(files[0]);
    alert(files[0].name);
});
<input type="file" id="file-upload"/>

Comments