使用 jquery 更改文件输入的图标

Question

我正在尝试使用自定义样式的文件输入构建一个 html 表单。一旦用户选择了要上传的文件，我希望标签的图标发生变化。我想出了一些 jquery 代码，但它会同时更改所有输入上的图标，而不是仅在当前输入上更改它。

有谁知道如何通过输入更改图标输入？

谢谢。

我的代码：

$("#file-to-upload").change(function(){
 $(".file-upload").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
});

input[type="file"] {
    display: none;
}

.file-upload {
 display: block;
 width: 260px;
 padding: 10px 16px 10px 56px;
 border: none;
 outline: none;
 margin-bottom: 10px;
 font: 16px/28px 'Open Sans','Helvetica Neue',Helvetica,sans-serif;
 color: #3f3f3f;
 font-weight: 300;
 background: #ececec;
 -webkit-border-radius: 0;
 cursor: pointer;
 background: url(http://cdn.sstatic.net/Whosebug/img/favicon.ico?v=4f32ecc8f43d) 2% / 45px no-repeat #ececec;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div><label for="file-to-upload" class="file-upload">File input 1</label>
<input type="file" name="file-to-upload" id="file-to-upload"></div>
<div><label for="file-to-upload" class="file-upload">File input 2</label>
<input type="file" name="file-to-upload" id="file-to-upload"></div>

Answer 1

因为你对两个 div 应用了相同的 css，你应该使用 $(this) 来获取被点击的元素。

$("#file-to-upload").on('change', function(){
    $(this).parent().find(".file-upload").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
});

Answer 2

原因是您对两个输入使用了相同的 ID，并且对两个标签再次使用了相同的 class。所以您可以将代码更改为：

$("#first-file-to-upload").change(function(){
 $("#firstLabel").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
});

$("#second-file-to-upload").change(function(){
 $("#secondLabel").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
});

input[type="file"] {
    display: none;
}

.file-upload {
 display: block;
 width: 260px;
 padding: 10px 16px 10px 56px;
 border: none;
 outline: none;
 margin-bottom: 10px;
 font: 16px/28px 'Open Sans','Helvetica Neue',Helvetica,sans-serif;
 color: #3f3f3f;
 font-weight: 300;
 background: #ececec;
 -webkit-border-radius: 0;
 cursor: pointer;
 background: url(http://cdn.sstatic.net/Whosebug/img/favicon.ico?v=4f32ecc8f43d) 2% / 45px no-repeat #ececec;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div><label for="first-file-to-upload" class="file-upload" id="firstLabel">File input 1</label>
<input type="file" name="first-file-to-upload" id="first-file-to-upload"></div>
<div><label for="second-file-to-upload" class="file-upload" id="secondLabel">File input 2</label>
<input type="file" name="second-file-to-upload" id="second-file-to-upload"></div>

Karthik 也回答对了。但对文档中的多个元素使用相同的 ID 实际上并不是一个好习惯。

Answer 3

那是因为你在处理函数中查询“.file-upload”，而不是你可以使用 'this' 来引用相关的输入元素，然后使用 .prev() jQuery 引用所需标签的方法)

像这样：

$("your-selector").change(function(){
    //$(this).prev();//refers needed label
    $(this).prev().css("background","red");//set element.style to relevant label
});

重要我注意到您多次使用相同的 id 属性，这是极不推荐的。因为 'id' 属性用作元素的标识符，所以它在文档中应该是唯一的。我建议你找时间阅读这篇 post: valid id naming

使用 jquery 更改文件输入的图标

Changing icon for file input with jquery

jquery

icons

file

input