読み込み完了時にデータを表示する とても簡単に書けます。HTMLは最初のものと同じです。 var inputFile = document.getElementById('file'); var reader = new FileReader(); function fileChange(ev) { var target = ev.target; var file = target.files[0]; var type = file.type; var size = file.size; if ( type !== 'image/jpeg' ) { alert('選択できるファイルはJPEG画像だけです。'); inputFile.value = ''; return; } reader.readAsDataURL(file); } function fileLoad() { consol
![File API入門 | 前編 File APIとFileReader APIの利用](https://cdn-ak-scissors.b.st-hatena.com/image/square/3bb971f75d7f14f3df0e01a2a068854cfc78b0ba/height=288;version=1;width=512/https%3A%2F%2Fcodegrid.imgix.net%2Fimage.png%3Fixlib%3Djs-3.8.0%26w%3D1200%26h%3D630%26mark%3Dhttps%253A%252F%252Fcodegrid.imgix.net%252F~text%253Fixlib%253Djs-3.8.0%2526w%253D1000%2526txt%253DFile%252520API%2525E3%252581%2525A8FileReader%252520API%2525E3%252581%2525AE%2525E5%252588%2525A9%2525E7%252594%2525A8%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%25230269D8%26blend-mode%3Doverlay%26txt%3DFile%2520API%25E5%2585%25A5%25E9%2596%2580%2520%257C%2520%25E5%2589%258D%25E7%25B7%25A8%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)