javascript 输入类型文件将文件路径添加到跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20309442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input Type File Add File Path To A Span
提问by Christopher Rioja
I customized my input type="file" just like Facebook upload instead of textbox and a button(default input type="file") I make my input file a button only without the textbox where you can see the path of the file. I'am planning to add a span or a p tag next to my customized input file to show the path of the file.
我自定义了我的输入类型 =“文件”，就像 Facebook 上传而不是文本框和按钮（默认输入类型 =“文件”）我将我的输入文件设置为一个按钮，只有没有文本框，您可以在其中看到文件的路径。我打算在我的自定义输入文件旁边添加一个 span 或 ap 标记以显示文件的路径。
How can I print the file path to my span tag when I choose a file?
当我选择一个文件时，如何将文件路径打印到我的 span 标签？
html code
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 code
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;}
Thanks!
谢谢！
回答by Roko C. Buljan
$('input[type="file"]').change(function(){
$(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});
Demo: get rid of C:\fakepath\in Chrome
Or using the HTML5 file API
或者使用 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);
});
回答by Fabrício Matté
It is currently impossible to get the full path name in an user's computer in updated browsers. Quoting this answer:
当前无法在更新的浏览器中获取用户计算机中的完整路径名。引用这个答案：
[...] That the full file path is being sent in MSIE and other ancient webbrowsers is due to a security bug. The W3and RFC2388specifications have never mentioned to include the full file path. Only the file name. Firefox is doing its job correctly.
[...] 在 MSIE 和其他古老的网络浏览器中发送完整文件路径是由于安全错误。在W3和RFC2388从未提及的规格，包括完整的文件路径。只有文件名。Firefox 正确地完成了它的工作。
Think about privacy for a moment: would you like sites collecting (part of) your file system structure as a side-effect for every file you upload?
考虑一下隐私问题：您希望网站收集（部分）您的文件系统结构作为您上传的每个文件的副作用吗？
The filename is, most often, enough to indicate to the user which files s/he has selected, henceforth it should suffice for your use case.
大多数情况下，文件名足以向用户表明他/她选择了哪些文件，因此它应该足以满足您的用例。
Accessing a file input's valueproperty in the current stable Chrome release gives C:\fakepath\realfilename.extwhile Firefox gives realfilename.ext. You can normalize it to only the file name this way:
value在当前稳定的 Chrome 版本中访问文件输入的属性，C:\fakepath\realfilename.ext而 Firefox 则提供realfilename.ext. 您可以通过这种方式将其规范化为仅文件名：
$('input[type="file"]').change(function(){
var filename = this.value.match(/[^\\/]+$/, '')[0];
alert(filename);
});
回答by José SAYAGO
I think OP is referring to the filename which is normally found next to the default file button. As per stated by @fabricio-matte it is not possible to access file path from browsers due to security restrictions. Nonetheless, back to my first assumption, I think the solution is simply combining a little bit of JavaScript just to detect changes in the input and set the corresponding spanwith the default text used by the default browser's button, so let's put all pieces together:
我认为 OP 指的是通常在默认文件按钮旁边找到的文件名。正如@fabricio-matte 所述，由于安全限制，无法从浏览器访问文件路径。尽管如此，回到我的第一个假设，我认为解决方案只是简单地结合一点 JavaScript 来检测输入中的变化并设置span与默认浏览器按钮使用的默认文本相对应，所以让我们把所有部分放在一起：
OP HTML
操作 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 with some improvements
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 to Detect Input Changes
检测输入变化的 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 Demo: http://codepen.io/anon/pen/isJqx
CodePen 演示：http://codepen.io/anon/pen/isJqx
That way, you make sure the span gets updated every time the user has changed the file, no security restrictions broken, no need for paths, because anyway there were never paths shown in the first place.
这样，您可以确保每次用户更改文件时都会更新跨度，没有破坏安全限制，不需要路径，因为无论如何首先从未显示路径。
回答by issa sofer
.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;
}
You must call a library jquery before code
$(function () {
$('.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>
