JavaScript，如何获取删除的元素的值/内容/位？

Question

我需要发送文件，并且我想在不使用 JQUERY 的情况下拖放，然后我尝试使用以下命令获取文件的 BITS：

<form action="https://cocacola.tld/index.php" enctype="multipart/form-data" method="post">

<input type="file" name="bitsfile" />

<div id="mydiv" contenteditable="true" ondrop="document.forms.bitsfile.value = BITS_from_this_DROPPED_element;">drag file here</div>

<hr /><input type="submit" />
</form>

但当然“BITS_from_this_DROPPED_element”不起作用。

我怎样才能得到值“二进制”或元素的位被丢弃？

Answer 1

这可能会帮助您：

<form action="https://cocacola.tld/index.php" enctype="multipart/form-data" method="post">

    <input type="text" name="bitsfile" id="bitsfile" />
    
    <div style="min-height: 100px;" id="mydiv" contenteditable="true" ondragenter="document.getElementById('bitsfile').value = ''; event.stopPropagation(); event.preventDefault();" ondragover="event.stopPropagation(); event.preventDefault();" ondrop="event.stopPropagation(); event.preventDefault(); dodrop(event);" >drag file here</div>
    
    <hr /><input type="submit" />
</form>

<script>
    function dodrop(event)
    {
        var dt = event.dataTransfer;
        var files = dt.files;

        var count = files.length;
        var temp = "File Count: " + count + "\n";
        var sumBits = 0;

        for (var i = 0; i < files.length; i++) {
            temp += " File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " +
                files[i].name + " " + files[i].size + "\n";
            sumBits+= files[i].size;
        }
        document.getElementById('mydiv').innerText = temp;
        document.getElementById('bitsfile').value = sumBits;
    }

</script>

来源： https ://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/files

Answer 2

“大把戏”是：

FileReader()

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

现在，如果你想要预览图像：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL