Geek Answers Handbook

How to select a file using javascript?

I am trying to create Browser Dialogso that the user can upload images to my web page.

I know what I need to use <input type="file">, but I do not know where (or better, when) it extracts information when the user accepts the invitation that appears when you are clickat button.

In my case, when you are clickon button, an invitation appears, and I process this event through Javascript.

Here is my code:

window.onload = function(){ 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function(){
    document.getElementById("file").click();
  }

  var files = document.getElementById('file').files[0]; //I do not know where to put this line
  alert(files);
};			
#file{
  display: none;
}
<input type="file" id="file" accept=".jpg, .png, .jpeg">
<button id="buttonFile">Upload file</button>
Run codeHide result

, undefined, , . onclick button, . onclick , , , .

, :

  • , ?
  • , ?
  • (PHP), ?

!

+4
2

, , , . undefined.

window.onload = function() { 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function() {
    document.getElementById("file").click();
  };

  file.onchange = function(e){
     if (this.files && this.files[0]) {
        alert(JSON.stringify(this.files[0]));
     }
  };
};

1) onclick . 2) , . , . 3) -.

+1

window.onload = function() { 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function() {
    document.getElementById("file").click();
  };

  file.onchange = function() {
    alert(file.files[0].name);
  };
};
#file{
  display: none;
}
<input type="file" id="file" accept=".jpg, .png, .jpeg">
<button id="buttonFile">Upload file</button>
Hide result
0

More articles:


All Articles