js
[JavaScript] file drag and drop
natrue
2023. 12. 11. 16:19
728x90
๋๋๊ทธ ์ค ๋๋กญ API๋ฅผ ์ฌ์ฉํ๋ฉด HTML ์์์ ์์์ ๋๋๊ทธํ ํ์ผ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค.
<div id="divId"></div>
dragenter | ๋ฐ์ค ์์ Drag ๋ค์ด์์ ๋ |
dragover | ๋ฐ์ค ์์ Drag๋ฅผ ํ๊ณ ์์ ๋ |
dragleave | ๋ฐ์ค ๋ฐ์ผ๋ก Drag๊ฐ ๋๊ฐ ๋ |
drop | ๋ฐ์ค ์์์ Drag๋ฅผ Dropํ์ ๋ |
$(function(){
// drag and drop test๋ฅผ ์ํจ.
var uploadBox = document.querySelector('#divID');
// ํ์ผ ๋ด์์ค input ๊ฐ์ฒด ํ์์์
// event.dataTransfer.files ์ฌ๊ธฐ์ dropํ ํ์ผ์ ์ ๋ณด๊ฐ ๋ด๊น
/* ๋ฐ์ค ์์ Drag ๋ค์ด์์ ๋ */
uploadBox.addEventListener('dragenter', function(e) {
});
/* ๋ฐ์ค ์์ Drag๋ฅผ ํ๊ณ ์์ ๋ */
uploadBox.addEventListener('dragover', function(e) {
e.preventDefault();
console.log('dragover');
});
/* ๋ฐ์ค ๋ฐ์ผ๋ก Drag๊ฐ ๋๊ฐ ๋ */
uploadBox.addEventListener('dragleave', function(e) {
console.log('dragleave');
});
/* ๋ฐ์ค ์์์ Drag๋ฅผ Dropํ์ ๋ */
uploadBox.addEventListener('drop', function(e) {
e.preventDefault();
console.log('drop');
//ํ์ผ ์ด๋ฆ์ text๋ก ํ์
var files = e.dataTransfer.files;
for(var i = 0; i < files.length; i++){
var file = e.dataTransfer.files[i];
console.log('file '+[i]+' name : ' + file.name);
console.log('file '+[i]+' size : ' + file.size);
console.log('file '+[i]+' type : ' + file.type);
}
// ํ์ผ drag drop ํ ํจ์
fnInsert();
});
});
