wordpress 添加一个删除选项,以附件中的联系表格7

6ss1mwsb  于 2023-03-22  发布在  WordPress
关注(0)|答案(2)|浏览(155)

在联系表格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">

jslywgbw

jslywgbw1#

您可以使用下面的概念与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>
omqzjyyz

omqzjyyz2#

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>

相关问题