最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to get local filename using URL.createObjectURL? - Stack Overflow

programmeradmin3浏览0评论

I am using createObjectURL to get an image's attributes such as width and height. How do I get the local filename?

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

How do you get the filename from this? I have tried filename, src,and name. I know I can get the value from the corresponding input type="file" but I want to get it from the object (output.????? above), but how?

I am using createObjectURL to get an image's attributes such as width and height. How do I get the local filename?

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

How do you get the filename from this? I have tried filename, src,and name. I know I can get the value from the corresponding input type="file" but I want to get it from the object (output.????? above), but how?

Share Improve this question edited Nov 25, 2015 at 16:00 AtheistP3ace 9,69112 gold badges45 silver badges43 bronze badges asked Nov 25, 2015 at 15:30 The One and Only ChemistryBlobThe One and Only ChemistryBlob 7,88411 gold badges40 silver badges75 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 4

URL.createObjectURL does not have any of that information in the final returned value. It returns a URL of type string. And neither would your img element by default but if your event.target is a input of type file you can get the file name from that.

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

Fiddle: http://jsfiddle/AtheistP3ace/h1pswvk1/

Fiddle Code

HTML:

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

JS:

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

EDIT: Sorry I guess I missed that last part where you said you know you can get it from the input. Either way if your document.getElementById('myimage') is an img tag that would not have the file name. The only option would be if the src has the url to parse that out but from your code it seems like the img tag exists but has no src until a file is added to input and then you set the src programmatically. Please correct if I am wrong. Why do you not want to get it from where it is available? Why only from the myimage element?

发布评论

评论列表(0)

  1. 暂无评论