Geek Answers Handbook

Input Type File Add Space Path

I configured my input type = "file" in the same way as loading Facebook instead of a text field and button (by default, input type = "file"). I make my input file with a button only without a text field, where you can see the path to the file. I plan to add a range or p tag next to my custom input file to show the file path.

How can I print the path to the span tag when selecting 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!

+4
source share
4 answers

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 API file

Demo

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

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

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

});
+6
source

. :

[...] MSIE - - . W3 RFC2388 , . . Firefox .

: , , () , ?

, , , .

value Chrome C:\fakepath\realfilename.ext, Firefox realfilename.ext. :

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

+1

, OP , . @fabricio-matte, - . , , , JavaScript span , , :

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

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

// 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: http://codepen.io/anon/pen/isJqx

, , , , , , , .

+1
    .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>
0

More articles:


All Articles