Question

我正在使用createObjectURL来获取图片的属性，例如宽度和高度。如何获取本地文件名？

loadURL = function (event) {
    var output = document.getElementById('myimage'),
        output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function () {

        document.getElementById("urlinput").value = output. ? ? ? ? ?

        document.getElementById("width").value = output.width;
        document.getElementById("height").value = output.height;
    }
}

如何从中获取文件名？我尝试过filename，src和name。我知道我可以从相应的input type="file"获得值，但我想从对象中获取它（输出。?????上面），但是如何？

Answer 1

URL.createObjectURL在最终返回值中没有任何该信息。它返回string类型的URL。默认情况下，img元素也不会，但如果您的event.target是类型文件的输入，则可以从中获取文件名。

loadURL = function (event) {
    var output = document.getElementById('myimage'),
        output.src = URL.createObjectURL(event.target.files[0]),
        fileName = event.target.files[0].name;
    output.onload = function () {

        document.getElementById("urlinput").value = output. ? ? ? ? ?

        document.getElementById("width").value = output.width;
        document.getElementById("height").value = output.height;
    }
}

小提琴：http://jsfiddle.net/AtheistP3ace/h1pswvk1/

小提琴代码

HTML：

<input id="test" type="file" />

JS：

document.getElementById('test').addEventListener('change',
    function (event) {
        alert(event.target.files[0].name);
    }
);

编辑：抱歉，我想我错过了你说你知道你可以从输入中得到它的最后一部分。无论哪种方式，如果您的document.getElementById('myimage')是一个没有文件名的img标签。唯一的选择是，如果src有解析该问题的网址，但是从您的代码中看起来img标记似乎存在，但在将文件添加到输入之前没有src然后以编程方式设置src。如果我错了，请纠正。为什么你不想从它可用的地方获得它？为什么只来自myimage元素？

如何使用URL.createObjectURL获取本地文件名？

1 个答案: