javascript - 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。调用 html()在 o 上或使用 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;");