Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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>
like image 987
user3215821 Avatar asked Jan 29 '14 08:01

user3215821


People also ask

How do you resolve Fakepath?

To get around it, you can either add the websites you are working with to the Trusted Sites list. Or turn off the option called “Include local directory path when uploading files to a server”. And obviously, adding the sites to the trusted sites list is highly recommended.

Why does my attachment say Fakepath?

When someone uploads a resume to Crelate, they may notice the 'fakepath' along side the file name. The fakepath note there is the security implementation of your browser. Some browsers have a security feature that prevents JavaScript from knowing your file's local full path.

How do I get real path instead of Fakepath?

Use IE with file protocol if you want to get the real path. Possible duplicate of How to get full path of selected file on change of <input type='file'> using javascript, jquery-ajax?


2 Answers

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.

like image 179
Quentin Avatar answered Sep 28 '22 10:09

Quentin


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.

like image 20
Fusion Avatar answered Sep 28 '22 10:09

Fusion