为什么dataTransfer没有文件？

Question

我正在研究前端并尝试实现文件拖放。我阅读了指南和文档并尝试实现这一点，但是当我拖动文件时，事件起作用并且 dataTransfer 中没有文件。

HTML：

<form
            id='upload-profile-avatar'
            class='form form-upload-avatar flex-column-centered flex-centered gap-10'
            action='/change_avatar'
            method='POST'
            enctype='multipart/form-data'
        >
            <div class='flex-column-centered flex-centered gap-5 upload-avatar-modal__image'><img
                    class='upload-avatar-modal__picture'
                    src='/img/upload.png'
                    alt='upload image'
                />
                <span class='upload-avatar-modal-image__message'>Drag Here</span></div>
            <div class='flex-centered upload-avatar-modal__alternative'><span
                    class='font-size-14 upload-avatar-modal-image__message'
                >or</span></div>
            <div class='form__input form__input-upload-avatar'>
                <button
                    type='button'
                    data-action='choose'
                    class='btn btn-upload-avatar padding-5-10 border-radius-5 font-size-16 font-weight-bold'
                    form='upload-avatar'
                >
                    <span>Upload<input
                            type='file'
                            data-name='upload-avatar'
                            accept='image/jpeg, image/png'
                            class='input input-upload-avatar'
                            name='user-avatar'
                        /></span>
                </button>
            </div>
            <div class='upload-avatar-modal__avatar-preview'><img
                    class='avatar border-radius-10 avatar-preview__image'
                    src=''
                    alt='avatar-preview'
                /><div class='flex-centered upload-avatar-modal__undo'><button
                        class='stratch-layout flex-centered border-radius-5 btn btn-revert-change-avatar'
                    ><img src='/svg/close.svg' alt='undo-change-avatar' /></button></div></div>
        </form>

我将文件放在此表格上。 JS：

const dropAvatarHandler = (e) => {
        e.preventDefault();
        console.log(e);
        const file = e.dataTransfer?.files[0];
        if(!file)
        return;
        e.target.querySelector('.input-upload-avatar').files[0]=file;
//function which does something with files
        previewAvatar(e);
        
    }

    const dragoverAvatarHandler = (e) => {
        e.preventDefault();
    }
        document.querySelector('.form-upload-avatar').addEventListener('dragover',dragoverAvatarHandler);
        document.querySelector('.form-upload-avatar').addEventListener('drop',dropAvatarHandler);

console.log 告诉我没有文件，但我删除了一个文件。 根据指南和文档，它必须有效，但我没有看到问题。

我尝试了一些指南，但仍然不起作用。

Answer 1

不要将单个文件附加到输入的

FileList

，而是将

FileList

对象中的整个

DataTransfer

对象分配给输入对象。

const form = document.querySelector('.form-upload-avatar');

const dropAvatarHandler = (e) => {
  e.preventDefault();
  
  if (!e.dataTransfer.files.length) {
    return;
  }
  
  form.querySelector('.input-upload-avatar').files = e.dataTransfer.files;
}

const dragoverAvatarHandler = (e) => {
  e.preventDefault();
}

form.addEventListener('dragover', dragoverAvatarHandler);
form.addEventListener('drop', dropAvatarHandler);

<form id='upload-profile-avatar' class='form form-upload-avatar flex-column-centered flex-centered gap-10' action='/change_avatar' method='POST' enctype='multipart/form-data'>
  <div class='flex-column-centered flex-centered gap-5 upload-avatar-modal__image'><img class='upload-avatar-modal__picture' src='/img/upload.png' alt='upload image' />
    <span class='upload-avatar-modal-image__message'>Drag Here</span></div>
  <div class='flex-centered upload-avatar-modal__alternative'><span class='font-size-14 upload-avatar-modal-image__message'>or</span></div>
  <div class='form__input form__input-upload-avatar'>
    <button type='button' data-action='choose' class='btn btn-upload-avatar padding-5-10 border-radius-5 font-size-16 font-weight-bold' form='upload-avatar'>
                    <span>Upload<input
                            type='file'
                            data-name='upload-avatar'
                            accept='image/jpeg, image/png'
                            class='input input-upload-avatar'
                            name='user-avatar'
                        /></span>
                </button>
  </div>
  <div class='upload-avatar-modal__avatar-preview'><img class='avatar border-radius-10 avatar-preview__image' src='' alt='avatar-preview' />
    <div class='flex-centered upload-avatar-modal__undo'><button class='stratch-layout flex-centered border-radius-5 btn btn-revert-change-avatar'><img src='/svg/close.svg' alt='undo-change-avatar' /></button></div>
  </div>
</form>