将删除选项添加到联系人表单7中的附加文件中

Question

在联系表单7时，当附加任何要上传的文件时，没有删除附加文件的选项。如何在文件名旁边添加删除按钮或交叉按钮？

<input type="file" name="file-637" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">

<input type="file" name="file-638" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">

Answer 1

您可以将以下概念用于remove附加的输入文件

$.fn.fileUploader = function (filesToUpload) {
this.closest(".files").change(function (evt) {
for (var i = 0; i < evt.target.files.length; i++) {
filesToUpload.push(evt.target.files[i]);
};
var output = [];
for (var i = 0, f; f = evt.target.files[i]; i++) {
var removeLink = "<a class="removeFile" href="#" data-fileid="" + i + "">Remove</a>";
output.push("<li><strong>", escape(f.name), "</strong> - ",
f.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
}
$(this).children(".fileList")
.append(output.join(""));
});
};
var filesToUpload = [];
$(document).on("click",".removeFile", function(e){
e.preventDefault();
var fileName = $(this).parent().children("strong").text();
// loop through the files array and check if the name of that file matches FileName
// and get the index of the match
for(i = 0; i < filesToUpload.length; ++ i){
if(filesToUpload[i].name == fileName){
//console.log("match at: " + i);
// remove the one element at the index where we get a match
filesToUpload.splice(i, 1);
}	
	}
//console.log(filesToUpload);
// remove the <li> element of the removed file from the page DOM
$(this).closest('div.files').find('input[type="file"]').val('')
$(this).parent().remove();

//document.getElementById("uploadCaptureInputFile").value = "";
});
$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);
$("#uploadBtn").click(function (e) {
e.preventDefault();
});

body {
padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="#" method="POST" enctype="multipart/form-data">
<div class="row files" id="files1">
<h2>Files 1</h2>
<span class="btn btn-default btn-file">
Browse  <input type="file" name="files1" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>
<div class="row files" id="files2">
<h2>Files 2</h2>
<span class="btn btn-default btn-file">
Browse  <input type="file" name="files2" multiple />
</span>
<br />
<ul class="fileList"></ul>
</div>

</form>
</div>

Answer 2

document.querySelector('.remove').addEventListener('click', function() {
document.getElementById('file-637').value = '';
}, false);

document.querySelector('.remove2').addEventListener('click', function() {
document.getElementById('file-638').value = '';
}, false);

<input type="file" name="file-637" id="file-637" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
<button class="remove" onclick="event.preventDefault()">Reset file</button>
<br><br>
<input type="file" name="file-638" id="file-638" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
<button class="remove2" onclick="event.preventDefault()">Reset file</button>