如何在Chrome、Safari、Opera等Webkit浏览器中删除C fakepath？

Question

如何在Chrome，Safari和Opera等WebKit浏览器中删除C fakepath？

在IE和Firefox中，它只显示文件名，这是可以的。

但在Chrome、opera和safari中，它会显示C:\fakepath\700.jpg。

我该如何在Chrome、opera和safari中删除C:\fakepath\呢？

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

- user3215821

---

可能是重复的问题：使用jQuery获取文件输入的选定文件名而不包括路径 - Joel H.

请审核答案并选择一个标记。 - Fusion

Answer 1

使用正则表达式删除最后一个 \ 及其之前的所有内容。

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

显然，您将从文件输入中获取path。

- Quentin

---

警告：这个解决方案还不错，但并非完美。如果文件名包含反斜杠（例如在Unix系统上），则您将无法得到正确的文件名！更好的解决方案是使用 path.replace(/^C:\\fakepath\\/, "")。 - stackular

@stackular，你的也不完美。而且你有错别字。 replace("C:\fakepath\", ""); - atilkan

@emrah 什么错别字？不使用正则表达式来捕获文件名开头的 C:\fakepath\ 吗？ - stackular

Answer 2

你将得到第一个文件的名称。

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

如果你想获取多个文件名，你需要遍历files。

- Fusion

---

是的，而且你甚至不需要 jQuery。 - Fusion

谢谢您，@Fusion。这是最优秀的方法。 - Rounin

最重要的是，这种行为符合HTML标准，而“fakepath”则不符合。 - Andy

Answer 3

以下类似的内容应该适合您：

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

- Lewis Buckley

Answer 4

使用以下代码：

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

这是脚本

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

- Raju Harry

---

Unix文件名可以包含反斜杠，这个解决方案没有考虑到这一点。 - corvus_192