当我使用多个文件上传时，字段不起作用答案

【问题标题】：when I used multiple file upload, fields it's not working当我使用多个文件上传时，字段不起作用
【发布时间】：2019-04-27 23:19:56
【问题描述】：

当我在页面中使用单个文件上传时，工作正常，但当我在页面中使用多个字段时，它不起作用。我想按班级和动态id 解决问题，如果有人知道，我不想在页面上花费太多时间，请告诉我。

代码地址：https://codepen.io/tushar-kumawat/pen/WYyKYG

这里是 JavaScript 代码：

$('#chooseFile').bind('change', function () {
    var filename = $("#chooseFile").val();
    if (/^\s*$/.test(filename)) {
        $(".file-upload").removeClass('active');
        $("#noFile").text("No file chosen..."); 
    } else {
        $(".file-upload").addClass('active');
        $("#noFile").text(filename.replace("C:\\fakepath\\", "")); 
    }
});

【问题讨论】：

“它不工作”是什么意思。它究竟是如何不起作用的？发生什么了？应该发生什么？见minimal reproducible example
英语不是我的第一语言。但我想一个页面多个添加字段，请看codepen：codepen.io/tushar-kumawat/pen/WYyKYG
你的英语很好。我们只需要正确描述您想要什么。只说有些东西行不通，对我们也行不通。
得到@HerrSerker 的回答
医生，你得帮帮我！有点疼！

标签： javascript jquery file-upload jquery-file-upload

【解决方案1】：

$('.chooseFile, .chooseFile2').bind('change', function () {
  var filename = $(this).val();
  var $Upload = $(this).closest(".file-upload");
  if (/^\s*$/.test(filename)) {
    $Upload.removeClass('active');
    $(".file-select-name", $Upload).text("No file chosen..."); 
  }
  else {
    $Upload.addClass('active');
    $(".file-select-name", $Upload).text(filename.replace("C:\\fakepath\\", "")); 
  }
});

/****** IGNORE ******/
body { 
  width: 400px; 
  margin: 100px auto; 
  background-color: #f5f5f5; 
}

.copyright {
  display:block;
  margin-top: 100px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.copyright a{
  text-decoration: none;
  color: #EE4E44;
}


/****** CODE ******/
.file-upload {
	display: block;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
}

.file-upload .file-select {
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select .file-select-button {
	background: #dce4ec;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}

.file-upload .file-select:hover {
	border-color: #34495e;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select:hover .file-select-button {
	background: #34495e;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select {
	border-color: #3fa46a;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select .file-select-button {
	background: #3fa46a;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select input[type=file] {
	z-index: 100;
	cursor: pointer;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}

.file-upload .file-select.file-select-disabled {
	opacity: 0.65;
}

.file-upload .file-select.file-select-disabled:hover {
	cursor: default;
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	margin-top: 5px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select.file-select-disabled:hover .file-select-button {
	background: #dce4ec;
	color: #666666;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select.file-select-disabled:hover .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile">
  </div>
</div>

<br>
<br>
<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile2">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile2">
  </div>
</div>

【讨论】：

HerrSerker，哇！非常感谢。

【解决方案2】：

$('.chooseFile, .chooseFile2').bind('change', function () {
  var filename = $(this).val();  
  if (!filename) {
    $(this.parentElement.parentElement).removeClass('active');
    $(this.parentElement.querySelector(".file-select-name")).text("No file chosen..."); 
  }
  else {
    $(this.parentElement.parentElement).addClass('active');
    $(this.parentElement.querySelector(".file-select-name")).text(filename.replace("C:\\fakepath\\", "")); 
  }
});

/****** IGNORE ******/
body { 
  width: 400px; 
  margin: 100px auto; 
  background-color: #f5f5f5; 
}

.copyright {
  display:block;
  margin-top: 100px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.copyright a{
  text-decoration: none;
  color: #EE4E44;
}


/****** CODE ******/
.file-upload {
	display: block;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
}

.file-upload .file-select {
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select .file-select-button {
	background: #dce4ec;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}

.file-upload .file-select:hover {
	border-color: #34495e;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select:hover .file-select-button {
	background: #34495e;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select {
	border-color: #3fa46a;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload.active .file-select .file-select-button {
	background: #3fa46a;
	color: #FFFFFF;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
}

.file-upload .file-select input[type=file] {
	z-index: 100;
	cursor: pointer;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}

.file-upload .file-select.file-select-disabled {
	opacity: 0.65;
}

.file-upload .file-select.file-select-disabled:hover {
	cursor: default;
	display: block;
	border: 2px solid #dce4ec;
	color: #34495e;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	margin-top: 5px;
	text-align: left;
	background: #FFFFFF;
	overflow: hidden;
	position: relative;
}

.file-upload .file-select.file-select-disabled:hover .file-select-button {
	background: #dce4ec;
	color: #666666;
	padding: 0 10px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.file-upload .file-select.file-select-disabled:hover .file-select-name {
	line-height: 40px;
	display: inline-block;
	padding: 0 10px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile">
  </div>
</div>

<br>
<br>
<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" class="fileName">Choose File</div>
    <div class="file-select-name" id="noFile2">No file chosen...</div> 
    <input type="file" name="chooseFile" class="chooseFile2">
  </div>
</div>

【讨论】：