造型输入类型=“文件”。如何显示文件路径？

我一直在尝试设置输入类型=“文件”字段的样式。我的按钮是风格，但我似乎无法弄清楚如何让用户选择要上传的文件时显示文件路径/文件。任何人都可以帮助吗？造型输入类型=“文件”。如何显示文件路径？

<form action="" method="POST" enctype="multipart/form-data"> 
    <div class="fileupload-buttonbar"> 
     <label class="file-upload"><span>Upload....</span><input name="uploadfile" type="file"> </label>  
    </div> 
</form>

的CSS ...

.file-upload { 
    overflow: hidden; 
    display: inline-block; 
    position: relative;  
    vertical-align: middle; 
    text-align: center; 
    color: #fff; 
    border: 2px solid #707070; 
    background: #A0A0A0; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    text-shadow: #000 1px 1px 4px; 
    cursor:pointer; 
} 
.file-upload:hover { 
    background: #2FA2FF; 
} 
.file-upload.focus { 
    outline: 2px solid yellow; 
} 
.file-upload input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    font-size: 12px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    z-index:-1; 
} 
.file-upload span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: inline-block; 
    padding-top: .45em; 
} 
.file-upload { height: 38px; } 
.file-upload, 
.file-upload span { width: 160px; }  
.file-upload-status { 
    margin-left: 10px; 
    vertical-align: middle; 
    padding: 7px 11px; 
    font-weight: bold;  
    font-size: 16px; 
    color: #888; 
    background: #f8f8f8; 
    border: 3px solid #ddd; 
}

我的代码是在这里 http://jsfiddle.net/hjNEC/

来源

2012-12-28 AttikAttak

出于安全原因，有关文件本身与用户操作系统相关的信息受*保护。您可以获取文件的名称，但不能保存文件的存储路径。 – cimmanon

+1 @ @immanon。此外，无论您使用什么样式，请在每个您想要支持的浏览器上进行彻底检查，因为不同的浏览器呈现的文件控制*与其他*非常*不同，而且它们中的大多数对于它如何可能会有一些限制风格。 – Spudley

一个change事件添加到输入字段，然后就得到它的.value。

例（使用jQuery）：

$('input[name="uploadfile"]').change(function(){ 
    var fileName = $(this).val(); 
    alert(fileName); 
});

DEMO：http://jsfiddle.net/hjNEC/2/

编辑：由于输入字段是隐藏的，文件名也是其中的一部分，你会得在页面上自行显示fileName。

来源

2012-12-28 20:46:27

您好... 完美......我做了JS的该位因此，它显示的文件名在“选择文件”标签的按钮...感谢您的帮助.... 快乐的新年！ – AttikAttak

@AttikAttak：不客气！ :-D –

<form action="" method="POST" enctype="multipart/form-data"> 
    <div class="fileupload-buttonbar"> 
      <input type="file" name="uploadfile" id="uploadfile" style="display:none" onchange="file_path_display.innerHTML=uploadfile.value"/> 
      <span class="file-upload" onclick="uploadfile.click()" ondragdrop="uploadfile.dragdrop()">Upload....</span> 
      <div id="file_path_display"></div> 
    </div> 
</form>

来源

2014-11-30 15:44:34

请包括一些讨论/评论为什么你认为这是一个答案.. – Jayan

造型输入类型=“文件”。如何显示文件路径？

回答

相关问题