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>

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

$('[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

图像上载预览文件路径

1 个答案: