javascript - Input Type File Add File Path To A Span

I customized my input type="file" just like Facebook upload instead of textbox and a button(default input type="file") I make my input file a button only without the textbox where you can see the path of the file. I'am planning to add a span or a p tag next to my customized input file to show the path of the file.

How can I print the file path to my span tag when I choose a file?

html code

<!doctype>
<html>
<head>
</head>

<body>

<div class="browse-wrap">
    <div class="title">Choose a file to upload</div>
    <input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>

</body>
</html>

css code

div.browse-wrap {
        top:0;
        left:0;
        margin:20px;
        cursor:pointer;
        overflow:hidden;
        padding:20px 60px;
        text-align:center;
        position:relative;
        background-color:#f6f7f8;
        border:solid 1px #d2d2d7;}
    div.title {
        color:#3b5998;
        font-size:14px;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;}
    input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
    span.upload-path {
        margin:20px;
        display:block;}

Thanks!

How can I print the file path to my span tag when I choose a file?

html code

<!doctype>
<html>
<head>
</head>

<body>

<div class="browse-wrap">
    <div class="title">Choose a file to upload</div>
    <input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>

</body>
</html>

css code

div.browse-wrap {
        top:0;
        left:0;
        margin:20px;
        cursor:pointer;
        overflow:hidden;
        padding:20px 60px;
        text-align:center;
        position:relative;
        background-color:#f6f7f8;
        border:solid 1px #d2d2d7;}
    div.title {
        color:#3b5998;
        font-size:14px;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;}
    input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
    span.upload-path {
        margin:20px;
        display:block;}

Thanks!

Share Improve this question asked Dec 1, 2013 at 6:31 Christopher Rioja 1492 gold badges2 silver badges10 bronze badges

1 You can't. No browser will expose it to JavaScript. – Fabrício Matté Commented Dec 1, 2013 at 6:33
Correction: no browser except IE. See related stackoverflow./a/2200120/1331430 – Fabrício Matté Commented Dec 1, 2013 at 6:42

Add a ment |

4 Answers 4

Sorted by: Reset to default 6

DEMO

$('input[type="file"]').change(function(){
  $(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});

Demo: get rid of C:\fakepath\ in Chrome

Or using the HTML5 file API

DEMO

$('input[type="file"]').change(function(){

  var f = this.files[0];  
  var name = f.name;

  $(this).closest('.browse-wrap').next('.upload-path').text(name);

});

It is currently impossible to get the full path name in an user's puter in updated browsers. Quoting this answer:

[...] That the full file path is being sent in MSIE and other ancient webbrowsers is due to a security bug. The W3 and RFC2388 specifications have never mentioned to include the full file path. Only the file name. Firefox is doing its job correctly.

Think about privacy for a moment: would you like sites collecting (part of) your file system structure as a side-effect for every file you upload?

The filename is, most often, enough to indicate to the user which files s/he has selected, henceforth it should suffice for your use case.

Accessing a file input's value property in the current stable Chrome release gives C:\fakepath\realfilename.ext while Firefox gives realfilename.ext. You can normalize it to only the file name this way:

$('input[type="file"]').change(function(){
    var filename = this.value.match(/[^\\\/]+$/, '')[0];
    alert(filename);
});

Demo

I think OP is referring to the filename which is normally found next to the default file button. As per stated by @fabricio-matte it is not possible to access file path from browsers due to security restrictions. Nonetheless, back to my first assumption, I think the solution is simply bining a little bit of JavaScript just to detect changes in the input and set the corresponding span with the default text used by the default browser's button, so let's put all pieces together:

OP HTML

<div class="browse-wrap">
    <div class="title">Choose a file to upload</div>
    <input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>

OP CSS with some improvements

div.browse-wrap {
        top:0;
        left:0;
        margin:20px;
        cursor:pointer;
        overflow:hidden;
        padding:20px 60px;
        text-align:center;
        position:relative;
        background-color:#f6f7f8;
        border:solid 1px #d2d2d7;}
    div.title {
        color:#3b5998;
        font-size:14px;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;}
    input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
    span.upload-path {
        text-align: center;
        margin:20px;
        display:block;
        font-size: 80%;
        color:#3b5998;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;
}

JavaScript to Detect Input Changes

// Span
var span = document.getElementsByClassName('upload-path');
// Button
var uploader = document.getElementsByName('upload');
// On change
for( item in uploader ) {
  // Detect changes
  uploader[item].onchange = function() {
    // Echo filename in span
    span[0].innerHTML = this.files[0].name;
  }
}

CodePen Demo: http://codepen.io/anon/pen/isJqx

That way, you make sure the span gets updated every time the user has changed the file, no security restrictions broken, no need for paths, because anyway there were never paths shown in the first place.

    .custom{
    position: relative;
    z-index: 1;
    border: 1px solid #ccc;
    cursor:pointer;
    width: 30%;
    height: 30px;
}

.custom::after{
    content: "Upload";
    position: absolute;
    right: 0px;
    background-color: rgba(51, 122, 183, 1);
    height: 65%;
    padding: 5px 10px;
    color: #fff;
    display: block;
    font-size: 18px;
    width: 50px;
    text-align: center;
    top: 0;

}

.custom .file-text{
    display: block;
    position: absolute;
    padding: 2px 20px;
    color: #f00;
    font-weight: bold;
    font-size: 20px;
}

.custom .file{
     display: inline;
     width: 100%;
     height: 100%;
     z-index: 9999;
     opacity: 0;
     cursor: pointer;
     padding: 0;
     position: relative;
}

You must call a library jquery before code
    $(function () {
        $('.custom input[type="file"]').on("change", function() {

            $('.custom .file-text').text($(this).val());

        });
    });

    <!DOCTYPE html>
    <html>
       <head>
        </head>
       <body>
          <div class="custom">
             <span class="file-text">chosse file</span>
             <input type="file" class="file"></input>
          </div>
       </body>
    </html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Input Type File Add File Path To A Span - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)