多个文件上传上的样式css按钮答案

【问题标题】：styling css button on multiple file upload多个文件上传上的样式css按钮
【发布时间】：2018-07-19 00:00:03
【问题描述】：

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

<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 的代码。

我也试过这个，给每个输入一个不同的 name=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>

谁能帮帮我，好吗？谢谢。

【问题讨论】：

ID 在 HTML 文档的范围内必须是唯一的，因此您不能将多次显示的 HTML sn-p 原样放在页面上。这首先应该被重写，不再依赖 ID 来选择/查找元素。
我更改了这样的名称：

foto opladen

geen bestand gekozen

并调整了脚本，但还是不行。
请编辑您的问题，并包含您的 HTML 和 JS 代码的当前状态，在 cmets 中这很难阅读。

标签： css file button upload styling

【解决方案1】：

知道了！

<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）每个新输入。完成！

【讨论】：