如何在 chrome、safari、opera 等 webkit 浏览器中删除 c fakepath？

Posted 2023-03-05

【中文标题】如何在 chrome、safari、opera 等 webkit 浏览器中删除 c fakepath？

【英文标题】：how to remove c fakepath in webkit browser like chrome, safari, opera?

【发布时间】：2014-02-20 23:16:31

【问题描述】：

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

【问题讨论】：

Use jQuery to get the file input's selected filename without the path的可能重复

请查看答案并标记一个。

【参考方案1】：

使用下面的代码：

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

【讨论】：

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

【参考方案2】：

你会得到第一个文件的名字。

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

如果你想获得多个文件名，你必须遍历files。

【讨论】：

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

谢谢你，@Fusion。这是***的方法。

最重要的是 html 标准涵盖了这种行为，而 fakepath 则没有

【参考方案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>

【参考方案4】：

只需使用正则表达式删除最后一个 \ 之前（包括）之前的所有内容。

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

显然，您会从文件输入中获得path。

【讨论】：

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

@stackular 你的也不完美。你有错字。替换("C:\\fakepath\\", "");

@emrah 什么错字？并且不使用正则表达式在文件名的开头捕获 `C:\fakepath`？