ユーザーがブラウザ上の指定位置にファイルをドラッグ＆ドロップした時にファイル選択させる機能の実装を目指します。
目次
ドラッグ&ドロップ機能の完成イメージ
今回実装するドラッグ＆ドロップ機能は以下のようなイメージです。
指定のボックス内にドロップされた時にのみファイル選択させます。
HTML：ドロップエリアを設置する
まずはHTMLでドロップエリアを用意します。
ドロップエリアの中にinput type=”file”とプレビューエリアも設置しておきます。
<div class="drop-area">
<input type="file">
<div class="preview-area"></div>
</div>CSS：ドロップエリアの見た目を整える
ここではCSSでドロップボックスの見た目を調整します。
14行目の::file-selector-buttonはinputu type=”file”専用の疑似クラスでファイル選択ボタンの見た目を変更する事ができます。
.drop-area {
border: 1px dashed;
width: 350px;
}
.drop-area input[type="file"] {
padding: 45px 50px;
display: flex;
width: 100%;
}
.drop-area input[type="file"]:before {
content: "ここにファイルをドロップしてください\Aまたは";
text-align: center;
}
.drop-area input[type="file"]::file-selector-button {
width: 100%;
display: block;
border: none;
color: white;
background: gray;
padding: 8px;
}
.preview-area {
display: flex;
flex-direction: column;
align-items: center;
}
.preview-area img {
width: 80%;
margin-bottom: 20px;
}
ドラッグ＆ドロップでファイル選択できるボックスができました。
Javascript：選択された画像をプレビューする
選択された画像がプレビューされるとユーザーにとってとても便利ですよね。
プレビューしたい場合はJavascriptを使う必要があります。
document.querySelectorAll('.drop-area').forEach((el)=>{
el.querySelector('[type="file"]').addEventListener('change',(e)=>{
const fs = e.target.files
const imgs = Array.from(fs).map((f)=>`<img src="${URL.createObjectURL(f)}">`)
el.querySelector('.preview-area').innerHTML = imgs.join('')
})
})
ドラッグ＆ドロップされた画像がプレビューされるようになったと思うので試してみてください。
複数ファイルをドラッグ&ドロップできるようにする
複数のファイルをドラッグ&ドロップできるようにするには最初に追加したHTMLにmultiple属性を追加するだけでOKです。
<div class="drop-area">
<input type="file" multiple> <!-- 修正 -->
<div class="preview-area"></div>
</div>
複数のファイルが選択できるようになったと思います。
ソースコード全文
最期にソースコード全文を載せておきます。
そのままコピーしてお使いいただいても大丈夫です。
<style>
.drop-area {
border: 1px dashed;
width: 350px;
}
.drop-area input[type="file"] {
padding: 45px 50px;
display: flex;
width: 100%;
}
.drop-area input[type="file"]:before {
content: "ここにファイルをドロップしてください\Aまたは";
text-align: center;
}
.drop-area input[type="file"]::file-selector-button {
width: 100%;
display: block;
border: none;
color: white;
background: gray;
padding: 8px;
}
.preview-area {
display: flex;
flex-direction: column;
align-items: center;
}
.preview-area img {
width: 80%;
margin-bottom: 20px;
}
</style>
<div class="drop-area">
<input type="file">
<div class="preview-area"></div>
</div>
<script>
document.querySelectorAll('.drop-area').forEach((el)=>{
el.querySelector('[type="file"]').addEventListener('change',(e)=>{
const fs = e.target.files
const imgs = Array.from(fs).map((f)=>`<img src="${URL.createObjectURL(f)}">`)
el.querySelector('.preview-area').innerHTML = imgs.join('')
})
})
</script>
以上、ドラッグ＆ドロップでファイル選択をできるようにする方法でした。
参考になれば幸いです！
