首先,我需要道歉,因为我是非常新的编码,这可能是非常容易解决的
我需要获取文件的名称并将其显示在蓝色框中。我的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>
发布于 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>
发布于 2018-07-06 06:19:11
您需要为事件回调函数提供e
$("#file").on("change", function(e) {...}
https://stackoverflow.com/questions/51200517
复制相似问题