图片上传预览文件路径

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