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()或使用DOM将其设为indexer对象。

更改

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);

摇头

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

感谢您的努力...

使用Javascript拖动文件无效

2 个答案: