Javascript get文件名不起作用
Javascript get文件名不起作用
提问于 2018-07-06 06:08:22
首先，我需要道歉，因为我是非常新的编码，这可能是非常容易解决的
我需要获取文件的名称并将其显示在蓝色框中。我的js脚本的最后一部分不工作：
var filename = e.target.value.split('\\').pop();
$("#label_span").text(filename);当我使用代码片段进行尝试时，显示了下面的消息
{ "message"：“未定义未捕获的ReferenceError: E”，"filename"："https://stacksnippets.net/js"，"lineno"：109，"colno"：19 }
提前感谢！
$(document).ready(function() {
$("#file").on("change", function() {
var files = $(this)[0].files;
if (files.length >= 2) {
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = e.target.value.split('\\').pop();
$("#label_span").text(filename);
}
});
});body {
font-family: 'Varela Round', sans-serif;
font-family: 16px;
}
h1 {
color: #3c4954;
text-align: center;
margin-top: 100px;
font-size: 36px;
}
p {
color: #a4b0b9;
line-height: 200%;
}
* {
box-sizing: border-box;
}
footer {
position: absolute;
width: 100%;
bottom: 20px;
}
.form-div {
margin-top: 100px;
}
.input-label {
background: #009688;
color: #fff;
padding: 30px;
cursor: pointer;
}
.input-label:hover {
background: #26a69a;
cursor: white;
cursor: pointer;
padding: 30px;
transition: .2s;
}
.fa {
margin-right: 10px;
}
#file {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
<title>Custom Input</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Test_Impor.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body align="center">
<header>
<h1>Custom Input</h1>
</header>
<div class="form-div">
<form>
<label for="file" class="input-label">
<i class = "fa fa-upload"></i>
<span id = "label_span">Select files to upload</span>
</label>
<input id="file" type="file" multiple="true" />
</form>
</div>
<script src="Test_Import.js"></script>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-06 06:24:06
files数组的每个元素都是一个具有name属性的对象。因此，只需访问数组的第一个元素并获取其名称。
您不需要使用split()，因为它只包含名称，而不包含完整路径。
你可以直接使用this来代替$(this)[0]。
$(document).ready(function() {
$("#file").on("change", function() {
var files = this.files;
if (files.length >= 2) {
$("#label_span").text(files.length + " files ready to upload");
} else if (files.length == 1) {
var filename = files[0].name;
$("#label_span").text(filename);
} else {
$("#label_span").text("Select files to upload");
}
});
});body {
font-family: 'Varela Round', sans-serif;
font-family: 16px;
}
h1 {
color: #3c4954;
text-align: center;
margin-top: 100px;
font-size: 36px;
}
p {
color: #a4b0b9;
line-height: 200%;
}
* {
box-sizing: border-box;
}
footer {
position: absolute;
width: 100%;
bottom: 20px;
}
.form-div {
margin-top: 100px;
}
.input-label {
background: #009688;
color: #fff;
padding: 30px;
cursor: pointer;
}
.input-label:hover {
background: #26a69a;
cursor: white;
cursor: pointer;
padding: 30px;
transition: .2s;
}
.fa {
margin-right: 10px;
}
#file {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
<title>Custom Input</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Test_Impor.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body align="center">
<header>
<h1>Custom Input</h1>
</header>
<div class="form-div">
<form>
<label for="file" class="input-label">
<i class = "fa fa-upload"></i>
<span id = "label_span">Select files to upload</span>
</label>
<input id="file" type="file" multiple="true" />
</form>
</div>
<script src="Test_Import.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2018-07-06 06:19:11
您需要为事件回调函数提供e
$("#file").on("change", function(e) {...}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51200517
复制相关文章
相似问题