输入类型文件将文件路径添加到范围

Input Type File Add File Path To A Span

本文关键字：文件 范围 添加 类型 输入 路径      更新时间：2024-01-13

我自定义了我的输入type="file"，就像Facebook上传一样，而不是文本框和一个按钮（默认输入type="file"）我让我的输入文件成为一个按钮，而没有文本框，在那里你可以看到文件的路径。我计划在我的自定义输入文件旁边添加一个span或p标记，以显示文件的路径。

选择文件时，如何将文件路径打印到span标记？

html代码

<!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代码

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

谢谢！

演示

$('input[type="file"]').change(function(){
  $(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});

演示：在Chrome 中消除C:'fakepath'

或者使用HTML5文件API

演示

$('input[type="file"]').change(function(){
  var f = this.files[0];  
  var name = f.name;
  $(this).closest('.browse-wrap').next('.upload-path').text(name);
});

当前无法在更新的浏览器中获取用户计算机中的完整路径名。引用这个答案：

[…]在MSIE和其他古代网络浏览器中发送完整的文件路径是由于安全漏洞。W3和RFC2388规范从未提及包含完整的文件路径。只有文件名。Firefox的工作做得很正确。

考虑一下隐私：你是否希望网站收集（部分）你的文件系统结构，作为你上传的每个文件的副作用？

文件名通常足以向用户指示他/她选择了哪些文件，因此它应该足以满足您的用例。

在当前稳定的Chrome版本中，访问文件输入的value属性会得到C:'fakepath'realfilename.ext，而Firefox则得到realfilename.ext。您可以通过以下方式将其规范化为仅文件名：

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

演示

我认为OP指的是通常在默认文件按钮旁边找到的文件名。根据@fabricio mate的说法，由于安全限制，无法从浏览器访问文件路径。尽管如此，回到我的第一个假设，我认为解决方案只是简单地结合一点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

这样，您就可以确保每次用户更改文件时都会更新跨度，不会破坏安全限制，也不需要路径，因为无论如何，最初都不会显示路径。

    .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;
}

在编写代码之前必须调用库jquery$（函数（）{$（'.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>
相关文章：