Asp.net web api HTML拖放区域文件上载在拖动文件时不起作用

我有以下dropzone，用户可以在其中选择图像或将图像拖动到dropzone中。 当我通过

input type=file

按钮选择文件并单击

btnUpload

按钮时，图像被上传。但是，当我将项目拖到dropzone中，然后单击

btnUpload

按钮时，什么都没有发生：没有日志记录，没有网络请求，什么都没有。 为什么？这是我的密码

<div id="drop-area">
<span id="status"></span>
<p>Drop files here</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select files</label>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
<input id="btnUpload" type="submit" class="button green small" value="Upload" />  


<script type="text/javascript">     
    let btnUpload = document.getElementById("btnUpload")
    btnUpload.addEventListener('click', uploadFiles, false)

    function uploadFiles(event) {
        event.preventDefault();
        // TODO - validate file size, extension & amount

        files = [...fileElem.files]
        // Submit each file separately.
        files.forEach(uploadFile)

        //check if success and if so, remove from gallery 
        

    }

    // This all copy & paste
    // ************************ Drag and drop ***************** //
    let dropArea = document.getElementById("drop-area")

        // Prevent default drag behaviors
        ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false)
            document.body.addEventListener(eventName, preventDefaults, false)
        })

        // Highlight drop area when item is dragged over it
        ;['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false)
        })

        ;['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false)
        })

    // Handle dropped files
    dropArea.addEventListener('drop', handleDrop, false)

    function preventDefaults(e) {
        e.preventDefault()
        e.stopPropagation()
    }

    function highlight(e) {
        dropArea.classList.add('highlight')
    }

    function unhighlight(e) {
        dropArea.classList.remove('active')
    }

    function handleDrop(e) {
        var dt = e.dataTransfer
        var files = dt.files

        handleFiles(files)
    }

    let uploadProgress = []
    let progressBar = document.getElementById('progress-bar')

    function initializeProgress(numFiles) {
        progressBar.value = 0
        uploadProgress = []
        for (let i = numFiles; i > 0; i--) {
            uploadProgress.push(0)
        }
    }

    function updateProgress(fileNumber, percent) {
        uploadProgress[fileNumber] = percent
        let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
        //console.log('update', fileNumber, percent, total)
        progressBar.value = total
        return total === 100;
    }

    function handleFiles(files) {
        files = [...files]
        initializeProgress(files.length)
        //files.forEach(uploadFile)
        files.forEach(previewFile)
    }

    function previewFile(file) {
        //console.error('file.name: ' + file.name);
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onloadend = function () {
            let img = document.createElement('img')
            img.id = file.name;//.toString().replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_');
            img.src = reader.result
            document.getElementById('gallery').appendChild(img)
        }
    }

    function uploadFile(file, i) {
        var url = '/api2/uploadfile/135/3435' // TODO: change end point
        var xhr = new XMLHttpRequest()
        var formData = new FormData()
        xhr.open('POST', url, true)
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

        // Update progress (can be used to show progress indicator)
        xhr.upload.addEventListener("progress", function (e) {
            updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
        })

        xhr.addEventListener('readystatechange', function (e) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (updateProgress(i, 100)) {
                    //$("'" + "#gallery #" + xhr.responseText.replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_') + "'").remove();//how do we handle spaces in filenames?
                    //console.error(i);
                    $('#gallery img:nth-child(' + (i + 1) + ')').hide();
                    
                    //alert('Complete') // TODO
                    return true;
                }
            }
            else if (xhr.readyState == 4 && xhr.status != 200) {
                $('#status').html(GetMessageStatus('Error: ' + xhr.responseText, 1));
                return false;
            }
        })

        formData.append('file', file)
        xhr.send(formData)
    }
        </script>

把文件放在这里

选择文件
让btnUpload=document.getElementById（“btnUpload”）
btnUpload.addEventListener（'click'，uploadFiles，false）
函数上载文件（事件）{
event.preventDefault（）；
//TODO-验证文件大小、扩展名和数量
files=[…fileElem.files]
//分别提交每个文件。
files.forEach（上传文件）
//检查是否成功，如果成功，请从库中删除
}
//这一切都是复制粘贴
//*******************************拖放**************************//
让dropArea=document.getElementById（“dropArea”）
//防止默认拖动行为
;['dragenter'，'dragover'，'dragleave'，'drop'].forEach（eventName=>{
dropArea.addEventListener（eventName、PreventDefault、false）
document.body.addEventListener（eventName、PreventDefault、false）
})
//当项目拖动到拖放区域上时，高亮显示该区域
;['dragenter'，'dragover'].forEach（eventName=>{
dropArea.addEventListener（eventName、highlight、false）
})
;['dragleave'，'drop'].forEach（eventName=>{
dropArea.addEventListener（eventName、unhighlight、false）
})
//处理丢弃的文件
dropArea.addEventListener（'drop'，handleDrop，false）
功能默认值（e）{
e、 预防默认值（）
e、 停止传播（）
}
功能突出显示（e）{
dropArea.classList.add（'highlight'）
}
功能取消高亮度（e）{
dropArea.classList.remove（'active'）
}
函数handleDrop（e）{
var dt=数据传输
var files=dt.files
手文件（文件）
}
让uploadProgress=[]
让progressBar=document.getElementById（'progress-bar'）
函数初始化进程（numFiles）{
progressBar.value=0
上传进度=[]
对于（设i=numFiles；i>0；i--）{
上载进度。推送（0）
}
}
函数updateProgress（文件号，百分比）{
上载进度[文件号]=百分比
让total=上传进度。reduce（（tot，curr）=>tot+curr，0）/uploadProgress.length
//console.log（'update'，fileNumber，percent，total）
progressBar.value=总计
返回总数===100；
}
函数句柄文件（文件）{
文件=[…文件]
initializeProgress（files.length）
//files.forEach（上传文件）
files.forEach（预览文件）
}
函数预览文件（文件）{
//console.error（'file.name:'+file.name）；
let reader=new FileReader（）
reader.readAsDataURL（文件）
reader.onloadend=函数（）{
设img=document.createElement（'img'）
img.id=file.name；/.toString（）.replaceAll（“，”）.replaceAll（“，”）.replaceAll（“，”）.replaceAll（“，”）；
img.src=reader.result
document.getElementById（'gallery'）.appendChild（img）
}
}
函数上载文件（文件，i）{
var url='/api2/uploadfile/135/3435'//TODO:更改端点
var xhr=newXMLHttpRequest（）
var formData=new formData（）
xhr.open（'POST'，url，true）
setRequestHeader（'X-Requested-With'，'XMLHttpRequest'）
//更新进度（可用于显示进度指示器）
xhr.upload.addEventListener（“进度”，函数（e）{
updateProgress（即，（加载*100.0/e.total）| | 100）
})
xhr.addEventListener（'readystatechange'，函数（e）{
如果（xhr.readyState==4&&xhr.status==200）{
if（updateProgress（i，100））{
//$（“+”#gallery#“+xhr.responseText.replaceAll（“，”）.replaceAll（“，”）.replaceAll（“，”））.replaceAll（“，”）+”）.remove（）；//如何处理文件名中的空格？
//控制台错误（i）；
$（“#图库img:n子项（+（i+1）+”）.hide（）；
//警报（'Complete'）//待办事项
返回true；
}
}
else if（xhr.readyState==4&&xhr.status！=200）{
$（'#status'）.html（GetMessageStatus（'Error:'+xhr.responseText，1））；
返回false；
}
})
formData.append（'file'，file）
xhr.send（formData）
}

更新1

我在这里添加了代码：

---

我调试了所有程序，执行了相同的路径。但是，当我通过按钮选择1个图像并点击upload按钮时，在函数uploadFiles中，在这一行

files=[…fileElem.files]

变量

files

的长度为1，但当我拖放相同的图像时，然后点击上传按钮，变量

files

的长度为0。

将

fileElem.files=files

添加到

handleFiles（）

方法的顶部，或者修改

uploadFiles（）

方法。目前，

uploadFiles（）

仅从

fileElem

提取文件。作为修复，您可以将

fileElem

的文件列表设置为

handleFiles（）

中删除的文件。因此，新的

handleFiles（）

方法如下所示：

函数句柄文件（文件）{
fileElem.files=文件
文件=[…文件]
initializeProgress（files.length）
files.forEach（预览文件）
}

我认为您需要单独管理丢弃的图像，可能是在一组丢弃的文件中，因为丢弃在丢弃区域中的文件不会在F中考虑

let droppedFiles = [];

for (let i = 0; i < files.length; i++) {
    droppedFiles.push(files[i]);
}

for (let i = 0; i < droppedFiles.length; i++) {
    files.push(droppedFiles[i]);
}