使用Javascript拖动文件无效

Question

我错过了一些东西，但我不确定它是什么......

我正在尝试将拖放文件区域的Base 64代码版本推送到文本区域......但由于某种原因它无法正常工作......

有人想告诉我我的代码出错了吗？ 这对我来说是新的领域......

$(document).ready(function() {

    function processFile(file){
        var o = $("#fileInfo");
        var reader = new FileReader();
        reader.onload = function(e) {
        o.innerHTML = e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");
        }
        reader.readAsURL(file);
    }

    // Sets up dataTransfer event
    jQuery.event.props.push('dataTransfer');

    // Bind drop to drop zone
    $('#drop-files').bind('drop', function(e) {
        // Prevents element from default function
        e.preventDefault();
        // Grabs list of files
        var files = e.dataTransfer.files;
        // Loop through files...
        $.each(files, function(index, file) {
            processFile(files[index]);
        });
    });
});

我真的不确定我搞砸了什么......最终我会把它推到我自己选择的上传页面......但是现在我想至少得到第一个文件的Base64代码来显示在该文本区域（“fileInfo”）。

欣赏这里的任何想法......

Answer 1

o表示jQuery对象，您无法访问它上面的DOM对象属性innerHTML 。 在o上调用html（）或使用indexer使其成为DOM对象。

更改

o.innerHTML = e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");

至

o.html(e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");)

要么

o[0].innerHTML = e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;");

Answer 2

我只知道发生了什么......

这条线：

reader.readAsURL(file);

应该读：

reader.readAsURLData(file);

摇我的头

但我现在发现了另一个小问题，我稍后会发布......

谢谢你的努力......