css - 在多个文件上载样式CSS按钮

可以使用多种方法来设置上传按钮的样式。这就是我所拥有的，如果您希望使用一个文件上传，则效果非常好：

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" id="fileName">foto opladen</div>
    <div class="file-select-name" id="noFile">geen bestand gekozen</div>
    <input type="file" name="chooseFile" id="chooseFile">
  </div>
</div>

和CSS和JS：

<script>
$('#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\\", ""));
}
});
</script>

<style>
.file-upload{display:block;text-align:center;}
.file-upload .file-select{display:block;color: #34495e;cursor:pointer;height:40px;line-height:40px;text-align:left;background:#fff;overflow:hidden;position:relative;}
.file-upload .file-select .file-select-button{background:#fff;padding:0 10px;display:inline-block;height:40px;line-height:40px;border:1px solid #6b8df2;border-radius: 20px;}
.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:#6b8df2;color:#fff;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:#6b8df2;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:#6b8df2;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;}
</style>

但是在我的表单上，我需要上传八张图片，因此需要设置八个按钮see image的样式。使用多个文件上传按钮时，找不到用于样式化CSS的代码。

我也尝试过这样做，给每个输入一个不同的名称= chooseFile，但也不起作用：

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" id="fileName">foto opladen</div>
    <div class="file-select-name" id="noFile">geen bestand gekozen</div>
     <input type="file" name="chooseFile1" id="chooseFile1">
  </div>
</div>

<script>
$('#chooseFile1').bind('change', function () {
var filename = $("#chooseFile1").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\\", ""));
}
});
$('#chooseFile2').bind('change', function () {
var filename = $("#chooseFile2").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\\", ""));
}
});
</script>

有人可以帮我吗？谢谢。

最佳答案

得到它了！

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

和

<div class="custom-upload">
  <div class="file-upload">
    <div class="file-select">
      <div class="file-select-button" id="fileName">kies foto</div>
      <div class="file-select-name" id="noFile">geen foto gekozen</div>
      <input type="file" name="attach8" id="chooseFile">
    </div>
   </div>
  </div>

只需在每个新输入中更改名称（attach8）。
做完了！