尽管我无法在YouTube上精确复制教程，但我是否有任何理由可以显示上传的文件名来显示上传的文件名 - 请参阅下面的链接？
在教程e中用于JS中的eventListener函数，但是Adobe Dreamweaver却没有，所以我使用了addEventListener
事先感谢您的任何见解。：）
https://www.youtube.com/watch?v=jml3bzo_toa＆amp;list = plq0y5ychfmjvcfmjvcfo7t1_72vu2fixo5xaei＆amp; ampinex = 1
$(document).ready(function(){
"use strict";
$("#uploadBtn").on("change", function(){
var files = $(this)[0].files;
if(files.length >= 2){
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = addEventListener.target.value.split('\').pop();
$("#label_span").text(filename);
}
});
});.uploadFile{
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn{
display: none;
width: auto;
}
.uploadButtonLabel{
font-size:18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before{
font-family: fontAwesome;
content: "f093";
margin-right: 10px;
}
.uploadButtonLabel:hover{
cursor: pointer;
}<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple = "true" />
</div>
<script src="bookCastingJS.js"></script>您可以改用files变量。
$(document).ready(function() {
"use strict";
$("#uploadBtn").on("change", function() {
var files = $(this)[0].files;
if (!files) return;
if (files.length > 1) {
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = files[0].name;
$("#label_span").text(filename);
}
});
});.uploadFile {
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn {
display: none;
width: auto;
}
.uploadButtonLabel {
font-size: 18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before {
font-family: fontAwesome;
content: "f093";
margin-right: 10px;
}
.uploadButtonLabel:hover {
cursor: pointer;
}<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple="true" />
</div>
<script src="bookCastingJS.js"></script>