造型输入类型=“文件”。如何显示文件路径？ [英] Styling the input type="file". How do I display the file path?

问题描述

我一直在试图设计一个输入类型=文件字段。
我的按钮是风格的，但我似乎无法弄清楚如何让用户选择文件上传时显示的文件路径/文件。
有人可以帮忙吗？

pre $ < form action =method =POSTenctype =multipart /格式数据>
< div class =fileupload-buttonbar>
< label class =file-upload>< span>上传....< / span>< input name =uploadfiletype =file> < /标签>
< / div>
< / form>


CSS ...

  .file-upload {
 overflow：hidden; 
 display：inline-block; 
 position：relative; 
 vertical-align：middle; 
 text-align：center; 
颜色：#fff; 
 border：2px solid＃707070; 
背景：＃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; 
剩下：0; 
保证金：0; 
 font-size：12px; 
 opacity：0; 
 filter：alpha（opacity = 0）; 
 z-index：-1; 
} 
 .file-upload span {
 position：absolute; 
 top：0; 
剩下：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; 
颜色：＃888; 
背景：＃f8f8f8; 
 border：3px solid #ddd; 
 
 code 
 
 
 
 
 
 
 $我的代码在这里
  http://jsfiddle.net/hjNEC/  
解决方案 
添加一个更改事件到输入字段，然后得到它的<$ c 
 
 $例子（使用jQuery）：
 
 <$ p $ （）函数（）{
 var fileName = $（this）.val（）; 
 alert（）{code> $（'input [name =uploadfile]' fileName）; 
}）; 
  

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

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

I have been trying to style an input type="file" field. My button is styled but I can't seem to figure out how to get the filepath/file to show when the user selects the file to upload. Can anyone out there help?

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

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

​

My code is here http://jsfiddle.net/hjNEC/

解决方案

Add a change event to the input field, and then just get it's .value.

Example (using jQuery):

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

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

EDIT: Since the input field is hidden, and the file name is part of that, you're gonna have to display fileName on the page yourself.

这篇关于造型输入类型=“文件”。如何显示文件路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！