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

Question

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

代码url：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\", "")); 
    }
});

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

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

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

when I used multiple file upload, fields it's not working

javascript

jquery

file-upload

jquery-file-upload