Posted at

ドラッグして画像アップロード&クリックで画像アップロード&アップロードした画像を即座に表示


はじめに

なんか出来ちゃったので配布。

使うアテがないので供養のつもり。

編集リクくれたら解説とかするかも。


コード

※全部1本にまとめてあります


test.html

<style>

#imageframe{
width: 300px;
height: 400px;
border: 1px solid black;
background-image: url(./hogehoge.png);
background-repeat: no-repeat;
background-size: contain;
}
</style>

<form action="hoge.html" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
<div class="portlate" id="imageframe">
<input type="file" name="imgfile" value="" accept="image/png,image/jpeg,image/gif" multiple>
</div>
</form>

<script type="text/javascript">
(function(){
'use strict';

var imageflame = document.getElementById('imageframe');
var imageinput = document.querySelector('#imageframe input[name="imgfile"]');
imageinput.style.display = "none";

// 画像をドラッグしたとき、それを読み込みつつ表示

// ファイルがドロップされたとき、そのファイルのアップロード処理を実行しつつ、クラス削除
imageflame.addEventListener('drop', function(event){
event.preventDefault();

// クラス削除
imageflame.classList.remove('dropover');

// ドロップファイルを変数に格納
var files = event.dataTransfer.files;
// ファイルそのものをinputに格納
imageinput.files = files;

// 読み込んだ画像を表示
for(var i = 0; i<files.length; i++){
var file = files[i];

var reader = new FileReader();
reader.onload = function(elem) {
// 引数のelemはドラッグ中のファイルではなく、読み込みされた時点でのファイル。
imageflame.style.cssText = "background-image: url(" + elem.target.result + ");";
};
reader.readAsDataURL(file);

}

});

// ドラッグ中のファイルがimageflameの上に来ていたらクラス追加しつつ、ドロップの許可を出す
imageflame.addEventListener('dragover', function(event){
event.preventDefault();
imageflame.classList.add('dropover');

// ドラッグ中のファイルの属性を変更し、ドロップ可能にする
event.dataTransfer.dropEffect = 'copy';
});

// ドラッグ中のファイルがimageflameの上から離れたらクラス削除
imageflame.addEventListener('dragleave', function(){
imageflame.classList.remove('dropover');
});

// クリックしたときに「ファイルを選択」を起動
imageflame.addEventListener('click', function(){
imageinput.click();
});

// 画像が挿入されたとき、その画像を表示する
imageinput.addEventListener('change', function(event){

var reader = new FileReader();
reader.onload = function(event){
imageflame.style.cssText = "background-image: url(" + event.target.result + ");";
console.log(event.target.result);
}
reader.readAsDataURL(event.target.files[0]);
});

})();
</script>



参考文献

http://koheik.hatenablog.com/entry/2016/07/08/152936

https://qiita.com/ginpei/items/5cebb14e210fc0770e94

https://qiita.com/FiNGAHOLiC/items/4bddee7b0bfe9555636a