图片上传预览文件路径

Image Upload Preview File Path

本文关键字：文件 路径      更新时间：2023-09-26

我按照这里的答案创建一个带有图像预览的文件上传。

我有它的工作，但不能弄清楚如何放置文件路径在一个单独的div。

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

这是我想放置文件路径text的元素:

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

我已经尝试在reader.onload功能上设置.text，如

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

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

你写的方式，你试图瞄准img标记作为data-label=UploadPath的子，所以如果你在一个空的<img/>然后脚本可以附加图像，像这样:

JSFIDDLE

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

更新:

上传时获取值，如果需要，可以使用regex去掉文件名前的路径

更新小提琴

UPDATE AGAIN我去掉了路径，所以你只得到文件名:

已更新的小提琴2

相关文章：