HTML5 File API

<input type="file" multiple id="file">  //multipleあれば、複数ファイルを選択できる

document.getElementById( "file" ).addEventListener( "change", function() {
 var fileList = this.files ;  //this.filesはFileListオブジェクト
 for( var i=0,l=fileList.length; l>i; i++ ) {
  var fileReader = new FileReader() ;　//インスタンスを作成
  fileReader.readAsDataURL( fileList[i] ) ;  // ファイルをデータURIとして読み込む

//読み込みが成功して完了した場合、HTMLを書き出す
  fileReader.onload = function() {
   var dataUri = this.result ;
   document.getElementById( "output" ).innerHTML += '<img src="' + dataUri + '">' ;
  } 
 }
} ) ;

参考：

https://syncer.jp/javascript-reverse-reference/output-local-image

https://app.codegrid.net/entry/file-api-filereader-api

複数のfileをuploadするには

<input type="file" multiple id="file">