javascript - 图片上传预览文件路径

Question

我正在关注答案 HERE创建带有图像预览的文件上传。

我可以使用它，但不知道如何将文件路径放在单独的 div 中。这是 js:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('[data-label="UploadPreview"]').children('img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$('#UploadInput').change(function(){
    readURL(this);
});

这是我要放置文件路径文本的元素:

<div data-label="UploadPath"></div>

我已经尝试在 reader.onload 函数上设置 .text

$('[data-label="UploadPath"]').text(e.target.result);

但结果似乎是图像的 base64 值。你能帮我弄清楚如何在 data-label="UploadPath" div 中包含图像的路径吗？谢谢你的想法!顺便说一句，我是 jQuery 的新手，所以一个如何包含在我当前代码中的示例会有很大帮助。谢谢!

Answer 1

按照您编写的方式，您正试图以 img 为目标标记为 data-label=UploadPath 的子项，所以如果你输入一个空的 <img/>然后脚本可以像这样附加图像:

JSFIDDLE

您还可以附加 <img/>标签而不是在那里留下一个空白，你的选择

更新:

上传时抓取值即可，需要时可以用正则去掉文件名前的路径

UPDATED FIDDLE

再次更新 我去掉了路径，所以你只得到文件名:

UPDATED FIDDLE 2