javascript - 使用 pureJS 拖放，无后端

Question

我正在尝试为 jpg 和 png 图片创建一个加载器，到目前为止，我已经设法让它与从计算机中选择文件一起工作，但我不明白如何让它与拖放一起工作-掉落事件。如果有人可以详细说明此事，我将不胜感激。

我当前的代码如下:

var FILE_TYPES = ['jpg', 'jpeg', 'png'];

var fileChooser = document.querySelector('.img-upload__input');
var preview = document.querySelector('.img__chosen-image');

fileChooser.addEventListener('change', function () {
    var file = fileChooser.files[0];
    var fileName = file.name.toLowerCase();

    var matches = FILE_TYPES.some(function (it) {
        return fileName.endsWith(it);
    });

    if (matches) {
        var reader = new FileReader();

        reader.addEventListener('load', function () {
            preview.src = reader.result;
        });

        reader.readAsDataURL(file);
    }
});

.upload-img__field {
    position: relative;
    width: 685px;
    min-height: 405px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    border: 1px $light-silver dashed;

    @include tablet-large {
        width: 630px;
    }

    @media (max-width: 1100px){
        width: 100%;
        margin-bottom: 30px;
    }
}

.field__image {
    padding-top: 45px;
    margin-bottom: 15px;
}

.field__heading {
    font-family: "Verdana";
    font-weight: normal;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 29px;

}

.field__subheading {
    font-family: "Verdana";
    text-transform: lowercase;
    font-size: 22px;
    line-height: 27px;
}

.img-upload__label {
    cursor: pointer;
}

.img__chosen-image {
    position: absolute;
    height: 407px;
    width: auto;
}

.field__rules {
    margin-top: 40px;
}

.field__size {
    padding-bottom: 10px;
}

.field-grey {
    font-family: "Verdana";
    color: #9FAAB2;
    font-size: 17px;
    line-height: 18px;
}

<div class="upload-img__field field">
                <img class="img__chosen-image" src="">
                <h2 class="field__heading">Перетащите файл</h2>
                <p class="field__subheading">Или <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required="">
                    <label for="upload-file" class="img-upload__label page-link">загрузите</label> его</p>
                <div class="field__rules">
                    <p class="field__size field-grey">
                        Рекомендуется 1600<sup>*</sup>1200&nbsp;px и&nbsp;выше, весом до&nbsp;10&nbsp;мб
                    </p>
                    <p class="field__format field-grey">
                        JPEG, PNG
                    </p>
                </div>
            </div>

Answer 1

	var droppedFiles = null;
	
	function fileContainerChangeFile(e) {
		document.getElementById('fileSelectBox').classList.remove( 'fileContainerDragOver' );
		try {
			droppedFiles = document.getElementById('fs').files;
			document.getElementById('fileName').textContent = droppedFiles[0].name;
		} catch (error) { ; }
		// you can also use the property from the fs field, but this won't work
		// with good old IE.
		try {
			aName = document.getElementById('fs').value;
			if (aName !== '') {
				document.getElementById('fileName').textContent = aName;
			}
		} catch (error) {
			;
		}
	}
	
	function onDrop(e) {
		document.getElementById('fileSelectBox').classList.remove( 'fileContainerDragOver' );
		try {
			droppedFiles = e.dataTransfer.files;
			document.getElementById('fileName').textContent = droppedFiles[0].name;
		} catch (error) { ; }
	}

	function dragOver(e) {
		document.getElementById('fileSelectBox').classList.add( 'fileContainerDragOver' );
		e.preventDefault();
		e.stopPropagation();
	}

	function leaveDrop(e) {
		document.getElementById('fileSelectBox').classList.remove( 'fileContainerDragOver' );
	}

.fileContainer {
overflow: hidden;
position: relative;
border: 2px dashed #dadada;
float: left;
padding: 2em;
}
.fileContainer [type=file] {
cursor: pointer;
display: inline-block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.fileContainerFileName {
width: 360px;
border: 1px solid #a0a0a0;
display: inline-block;
padding: 0.5em;
border-right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fileContainerButton {
padding: 0.5em;
border: 1px solid #a0a0a0;
float: right;
display: inline-block;
}
.fileContainerDragOver {
background-color: gold;
border: 2px solid #808080;
}

<p>Select file to upload:</p>
<form method="post" action="#" enctype="multipart/form-data">
<label class="fileContainer" id="fileSelectBox" ondragover="dragOver(event)" ondragleave="leaveDrop(event)" ondrop="onDrop(event)">
<div class="fileContainerFileName" ondrop="onDrop(event)" id="fileName">Select File</div><span class="fileContainerButton">...</span>
<input name="fs" id="fs" onchange="fileContainerChangeFile(event)" type="file"/>
</label>
</form>

希望这可以帮助您理解流程。