How to copy file path in to span in addition to the input control itself?

Question

So far I tried this: JS:

function Copy(copyfrom, copyto) {
    document.getElementById(copyto).value = copyfrom.value;
}

And HTML code look like this:

    <div>
        <input type="file" onchange="Copy(this, 'txtFileName');" />
    </div>
    <div>
    <span id="txtFileName" type="text" readonly="readonly" />

    </div>

I want To copy the selected file name/path to different span,

Thanks!

score 2 · Answer 1 · edited May 23 '17 at 11:49

From Joe Enos answer you don't need to get server path

Some browsers have a security feature that prevents javascript from knowing your file's local full path. It makes sense - as a client, you don't want the server to know your local machine's filesystem. It would be nice if all browsers did this.

And to get the name of file, try to use innerText property of span instead of value as value works on form element fields try this,

function Copy(copyfrom, copyto) {
    document.getElementById(copyto).innerText = copyfrom.value;
}

Working demo

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

This is not possible due to security reasons.

For more details, see: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

edited May 23 '17 at 11:57

Community

1
1

answered Aug 11 '14 at 11:07

olive_tree

1,417
16
23

score 1 · Accepted Answer · answered Aug 11 '14 at 11:50

1

<input type="file"..> will not show textbox in chrome and safri browser, you can configure the display styles by CSS itself, go to the link here

answered Aug 11 '14 at 11:50

BenjaBoy

454
3
16

How to copy file path in to span in addition to the input control itself?

3 Answers3