![[JS/CSS]D&Dでファイルをアップしたい](https://www.id-frontier.jp/wp/wp-content/uploads/2023/01/21830aIMGL99841974.jpg-940x626.webp)
技術
[JS/CSS]D&Dでファイルをアップしたい
こんにちは。
ソリューションセクションの日野です。
最近は寒すぎたりあったかかったりして気温の変化に体がついていきません・・・
弊社でも体調を崩す人が出ているので皆さんも気を付けてくださいね！
さて、今回はWEBサイトでD&D（ドラッグ アンド ドロップ）でファイルをアップロードしてみます。
ユーザビリティ的にもD&Dできると直感的で使いやすくなるのではないでしょうか
設置例
ファイルアップロード
ファイル名
D&Dするとファイルがアップされてファイル名が表示されます。
クリックするとファイル選択ダイアログから選択することも可能です。
ソースコード
それではソースコードは以下になります！
HTML
最初にdivで全体を囲って文字表示とinputType=fileの要素を置いています
Jqueryを使用しているのでCDNも読み込みます
<div class="upload-area" id="uploadArea">
<p>ファイルアップロード</p>
<p class="mt-4" id="fileName">ファイル名</p>
<input type="file" id="fileInput">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>CSS
次にCSSでinput要素を透過して表示しないようにして、divのエリアとサイズを合わせています
.upload-area {
margin: auto;
width: 100%;
height: 100px;
position: relative;
border: 1px dotted rgba(0, 0, 0, .4);
}
.upload-area p {
position: absolute;
top: 14px;
left: 50px;
opacity: .8;
}
.upload-area p.mt-4 {
margin-top:35px;
}
.upload-area #fileInput {
top: 0;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}JS
最後にJSでD&Dしたときの動作を記載しています
$('#uploadArea').on('dragover', function () {
event.preventDefault();
this.style.backgroundColor = '#80ff80';
});
$('#uploadArea').on('dragleave', function () {
this.style.backgroundColor = '';
});
$('#uploadArea').on('drop', function () {
event.preventDefault();
this.style.backgroundColor = '';
if (event.dataTransfer.files.length > 0) {
$('#fileInput').prop('files', event.dataTransfer.files);
$('#fileInput').trigger('change');
}
});
$('#fileInput').on('change', function () {
$('#fileName').html(this.files[0].name);
});これでD&Dでファイルをアップできます！
見た目としてもすっきりしてていい感じですね
最後に
参考にしたのは以下のサイトです
ほぼコピペさせていただきました(;^ω^)
Google先生のおかげです
いつもありがとう！
それでは！
参考URL
https://koheik.hatenablog.com/entry/2016/07/08/152936
https://blog.ver001.com/javascript-datatransfer/
