Question

首先，我需要道歉，因为我对编码很陌生，这可能很容易解决

我需要获取文件名并将其显示在蓝色框中。我的js脚本的最后一部分不起作用：

var filename = e.target.value.split('\\').pop();    
$("#label_span").text(filename);

当我使用代码段尝试显示以下消息

{ “ message”：“未捕获的ReferenceError：未定义”， “ 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>

Answer 1

files数组的每个元素都是具有name属性的对象。因此，只需访问数组的第一个元素并获取其名称即可。

您不需要使用split()，因为它只包含名称，而不是完整路径。

您可以只使用$(this)[0]来代替this。

$(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>

Answer 2

您需要向事件回调函数提供e

$("#file").on("change", function(e) {...}

JavaScript获取文件名不起作用

2 个答案: