自定义文件上传按钮以使用JavaScript显示文件名

Question

I'm new to JavaScript and I'm having trouble changing the label of my customized File Upload button to show the file name after file has been selected.

Tried to follow these steps .

The button shows correctly and the file is uploaded, but I can't manage to make the JS work to show the uploaded files name on the button.

 var inputs = document.querySelectorAll('.wpcf7-file'); Array.prototype.forEach.call(inputs, function(input) { input.addEventListener('change', function(e) { var label = document.querySelectorAll('.custom-file-button'); var fileName = ''; fileName = e.target.value.split('\\\\').pop(); if (fileName) { label.innerHTML = fileName; } else label.innerHTML = labelVal; }); }); 

 label.custom-file-button { position: relative; } label.custom-file-button:before { content: "📷 Take or upload picture"; position: absolute; left: 0; padding: 10px; background: #1b87d5; color: #fff; width: auto; text-align: center; border-radius: 5px; cursor: pointer; } label.custom-file-button:hover:before { background: #146bac; } .custom-file-input { visibility: hidden; } 

 <div class="limit-to-view"> <label class="wpcf7-form-control-wrap custom-file-button"> <span class="wpcf7-form-control-wrap custom-file-input"> <input type="file" name="custom-file-input" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false"> </span> </label> </div> 

Answer 1

.querySelectorAll() returns a NodeList , not a single element. Substituted .closest() for .querySelectorAll() to select closest ancestor <label> element to the current <input type="file"> element. Since the <input type="file"> element is the child of the <label> setting .innerHTML to the file name would overwrite the <input type="file"> element. The CSS does not display a <span> element that is first child of the <label> , added the <span> to display file name as .nextElementSibling of <label> element. You can use e.target.files[0].name to get the file name.

 var inputs = document.querySelectorAll('.wpcf7-file'); Array.prototype.forEach.call(inputs, function(input) { input.addEventListener('change', function(e) { var label = e.target.closest('.custom-file-button'); label.nextElementSibling.innerHTML = e.target.files[0].name; }); }); 

 label.custom-file-button { position: relative; } label.custom-file-button:before { content: "📷 Take or upload picture"; position: absolute; left: 0; padding: 10px; background: #1b87d5; color: #fff; width: auto; text-align: center; border-radius: 5px; cursor: pointer; } label.custom-file-button:hover:before { background: #146bac; } .custom-file-input { visibility: hidden; } 

 <div class="limit-to-view"> <label class="wpcf7-form-control-wrap custom-file-button"> <span class="wpcf7-form-control-wrap custom-file-input"> <input type="file" name="custom-file-input" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false"> </span> </label> <span></span> </div>