Question

106

Input Type File Add File Path To A Span

rated 0 times [ 109] [ 3] / answers: 1 / hits: 20072 / 11 Years ago, sun, december 1, 2013, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daren

Add To Favorites

Follow

Total Points: 577

Total Questions: 114

Total Answers: 120

Location: Malaysia

Member since Fri, Dec 3, 2021

3 Years ago

daren questions

1 Prettier shell script format

Wed, May 12, 21, 00:00, 3 Years ago

1 Will using Angular Reactive Forms .get() method in template cause unnecessary method calls like a component method?

Tue, May 26, 20, 00:00, 4 Years ago

1 useState and callback function

Wed, Nov 27, 19, 00:00, 5 Years ago

1 Aggregate an array of objects in JavaScript

Thu, Oct 17, 19, 00:00, 5 Years ago

1 How can I change a Discord channel name using nodeJS and discordJS?

Thu, Aug 22, 19, 00:00, 5 Years ago

View All

answered 11 Years ago anais · Accepted Answer

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



});