html5 file drag and drop

html5의 파일 업로드시 drag and drop을 하는 기본 소스 입니다.

<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" onchange="readFiles(event)" multiple>
<label class="custom-file-label" for="customFile" id="fileDropZone">file select or drag and drop</label>
</div>
<div class="drag-files" style="display:none;">
</div>
</div>


<script>
function readFiles(event) {
$(".custom-file-label").html("");
$('.drag-files').html("");
var fileList = event.target.files;

for(var i=0; i < fileList.length; i++ ) {
var file = fileList[i];
if(i!=0){$(".custom-file-label").append(",");}
$(".custom-file-label").append(file.name);
}
}
function drop(event) {
$(".custom-file-label").html("");
$('.drag-files').html("");

event.stopPropagation();
event.preventDefault();

var fileList = event.dataTransfer.files;
addFileFromLastInput(fileList)

for(var i=0; i < fileList.length; i++ ) {
var file = fileList[i];
if(i!=0){$(".custom-file-label").append(",");}
$(".custom-file-label").append(file.name);
}
}
function addFileFromLastInput(file){
console.log(file);

var a = $('input#fileselect.addFile');
a[a.length-1].files = file;

try{
var new_input = '<input id="fileselect" type="file" name="fileselect" multiple class="addFile" />';
$('.drag-files').append(new_input);
}catch(err){

}
return 0;
}

var dropZone = document.getElementById("fileDropZone");
dropZone.addEventListener ( "drop", drop, false);
</script>

 

bootstrap4 에서 bs-custom-file-input.js 하는 경우 custom-file-input class를 사용하는 경우

drag, drop 시 custom-file-input 해당하는 input에 change가 발생 되고 readFiles이 실행 됩니다.

(drag 관련 스크립트는 사용할 필요 없습니다.)

 

bs-custom-file-input.js를 사용하지 않는 경우 위의 모든 소스를 다 사용 해야 합니다.

 

http://tutorials.jenkov.com/html5/file-api.html#selecting-multiple-files

HTML5 File API