how to remove c fakepath in webkit browser like chrome, safari, opera?

Question

How to remove c fakepath in webkit browser like chrome, safari, opera ?

in IE And Firefox it's show only file name , it's OK

But in Chrome, opera, safari. It's show C:\fakepath\700.jpg

How can i remove C:\fakepath\ in Chrome, opera, safari.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<style type="text/css">
.inputWrapper {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    /*This makes the button huge so that it can be clicked on*/
    font-size:50px;
}
.hidden {
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
</style>

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$(function() {
    $(".inputWrapper").mousedown(function() {
        var button = $(this);
        button.addClass('clicked');
        setTimeout(function(){
            button.removeClass('clicked');
        },50);
    });

    $('input[type=file]').change(function() {
        var $this = $(this);
        $this.parent().find('span').text($this.val());
    });
});
});//]]>  
</script>
<div class="inputWrapper" id="inputWrapper" style="height: 56px; width: 128px;">
    <input class="fileInput hidden" type="file" name="file2"/>
    <span></span>
</div>

possible duplicate of [Use jQuery to get the file input's selected filename without the path](http://stackoverflow.com/questions/6365858/use-jquery-to-get-the-file-inputs-selected-filename-without-the-path) — Joel H., Sep 17 '15 at 14:21

score 28 · Answer 1 · answered Jan 29 '14 at 09:49

28

Just use a regular expression to remove everything before (and including) the last \.

 var path = "C:\\fakepath\\example.doc";
 var filename = path.replace(/^.*\\/, "");
 console.log(filename);

Obviously, you'd get path from your file input.

answered Jan 29 '14 at 09:49

Quentin

914,110
126
1,211
1,335

6

Warning: this solution is good, but not perfect. If a file name contains a backslash (eg, on Unix systems) you won't get the right file name! A better solution is to use `path.replace(/^C:\\fakepath\\/, "")` – stackular Apr 11 '14 at 11:10
@stackular yours is not perfect also. and you have typo. replace("C:\\fakepath\\", ""); – atilkan Jul 20 '15 at 04:19
1

@emrah What typo? And not use a regexp to catch `C:\fakepath\` at the beginning of the file name? – stackular Jul 27 '15 at 15:37

Fusion · Answer 2 · 2017-03-13T17:25:29.370

22

And you will get the name of first file.

document.getElementById("yourInputElement").files[0].name

If you want to get multiple filenames, you have to iterate over files.

edited Mar 13 '17 at 17:25

answered Feb 21 '16 at 20:17

Fusion

5,046
5
42
51

Yeah.. moreover, you dont even need jQuery. – Fusion Feb 21 '16 at 20:18
Thank you for this, @Fusion. This is the superlative approach. – Rounin Jun 03 '21 at 09:50
Most importantly this behaviour is covered by HTML standards, whereas the fakepath isn't – Andy Jan 25 '22 at 08:33

score 1 · Answer 3 · answered Feb 20 '14 at 13:00

Something like the following should work for you:

<script type="text/javascript">
$(function() {
    $(".inputWrapper").mousedown(function() {
        var button = $(this);
        button.addClass('clicked');
        setTimeout(function(){
            button.removeClass('clicked');
        },50);
    });
    $('input[type=file]').on('change', function(e) {
        var filename = $(e.currentTarget).val().replace(/^.*\\/, "");
        $this.parent().find('span').text(filename);
    });
});
</script>

score -4 · Answer 4 · answered May 01 '17 at 09:24

Use Below Code :

<label for="file" class="input input-file"><div class="button"><input type="file" onchange="this.parentNode.nextSibling.value = this.value" name="uploadfiliron" class="uploadimg" data-gotfile='uploadimg-1'>Browse</div><input type="text" readonly class="uploadimg-1"></label>

And This is script

<script>$('body').on('change','.uploadimg',function(e){
var filename = $(this).val().replace(/.*(\/|\\)/, '');
var getft = $(this).attr('data-gotfile');
console.log(getft+" "+filename);
if(filename=='')
    {
        $('.'+getft).val('No file chosen');
    }
    else
    {
        $('.'+getft).val('Your file name: '+filename);
    }});</script>

Unix filenames can contain backslashes, this solution doesn't account for that. — corvus_192, Aug 22 '17 at 10:03

how to remove c fakepath in webkit browser like chrome, safari, opera?

4 Answers4