Каждый элемент $(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