我自定义了我的输入类型="file"就像Facebook上传而不是文本框和一个按钮(默认输入类型="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);
});
Demo: get rid of C:\fakepath\ in Chrome
或者使用 HTML5 file API
$('input[type="file"]').change(function(){
var f = this.files[0];
var name = f.name;
$(this).closest('.browse-wrap').next('.upload-path').text(name);
});
关于javascript - 输入类型文件将文件路径添加到跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20309442/