Javascript получить имя файла не работает

Во-первых, я буду n var filename = e . цели . значение . split ( '.' ). pop (); $ ( "#label_span" ). текст ( имя файла ); чтобы извиниться, поскольку я очень новичок в кодировании и $ ( документ ). ready ( function () { $ ( "#file" ). on ( "change" , function () { var files = $ ( this ) [ 0 ]. файлы ; if ( files . length > = 2 ) { $ ( "#label_span" ). текст ( файлы . длина + «файлы, готовые к загрузке» ); } else { var filename = e . цели . значение . split ( '.' ). pop (); $ ( "#label_span" ). текст ( имя файла ); } }); }); может быть очень легко решить

Мне нужно получить тело { font-family : «Varela Round» , sans-serif ; font-family : 16px ; } h1 { color : # 3c4954 ; text-align : center ; margin-top : 100px ; font-size : 36px ; } p { color : # a4b0b9 ; высота линии : 200% ; } * { box-sizing : border-box ; } footer { position : absolute ; ширина : 100% ; снизу : 20px ; } . form-div { margin-top : 100px ; } . input-label { background : # 009688 ; цвет : #fff ; прокладка : 30px ; курсор : указатель ; } . input-label : hover { background : # 26a69a ; курсор : белый ; курсор : указатель ; прокладка : 30px ; переход : .2s ; } . fa { margin-right : 10px ; } # file { display : none ; } файла и отобразите его в синем поле. Последняя часть моего js-скрипта не работает:

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

Сообщение, показанное ниже, было показано, когда я попробовал его с помощью кода.

{"message": "Uncaught ReferenceError: e не определен", "filename": " https://stacksnippets.net/js ", "lineno": 109, "colno": 19}

Заранее спасибо!

files
name
split()

javascript,jquery,html,

0

Ответов: 2


2 принят

Каждый элемент $(this)[0]массива представляет собой объект со nameсвойством. Поэтому просто войдите в первый элемент массива и получите его имя.

Вам не нужно использовать 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"); } }); });this

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>
e


0

Вам необходимо предоставить eфункцию обратного вызова вашего мероприятия

$("#file").on("change", function(e) {...}
JavaScript, JQuery, HTML,
Похожие вопросы