当文件上传(多个）完成时，复选框将自动选中

when the file upload (multiple) complete, the checkbox will auto check

本文关键字：复选框 完成时 文件 多个      更新时间：2023-09-26

我正在做一个表单，在用户上传文件后，复选框将自动选中，这样用户就会知道他们的文件已经上传。

在表单中，将有几个"文件上传输入"和一个"多个文件上传输出"，每个输入旁边都有一个复选框，该复选框将在文件上传后自动选中。

这是我上传文件的代码

<div><input type="checkbox" id="application" value="application" name="application"/><label for="application"><span></span></label>
</div>
<div>
    <div>Application Form</div>
    <div>
        <input id="filename1" type="text"/> 
        <div class="fileUpload btn btn-primary">
            <span>Add</span>
            <input id="uploadBtn1" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
        </div>
    </div>                                                         
</div>
<div><input type="checkbox" id="application2" value="application2" name="application2"/><label for="application2"><span></span></label>
</div>
<div>
    <div>Application Form2</div>
    <div>
        <input id="filename2" type="text"/> 
        <div class="fileUpload btn btn-primary">
            <span>Add</span>
            <input id="uploadBtn2" type="file" class="upload" name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
        </div>
    </div>                                                         
</div>

编写脚本

document.getElementById('uploadBtn1').onchange = uploadOnChange;
function uploadOnChange() {
    var filename = this.value;
    var lastIndex = filename.lastIndexOf("''");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    document.getElementById('filename1').value = filename;
}

这是小提琴http://fiddle.jshell.net/kpxyb74h/

这是多文件的代码

<div><input type="checkbox" id="payment" value="payment" name="payment" /><label for="payment"><span></span></label>
</div>
<div>
    <div>Payment</div>
    <div>
        <div id="upload_prev"></div>
        <div class="fileUpload btn btn-primary">
        <span>Add</span>
        <input id="uploadBtn" type="file" class="upload" multiple name="browsefile" file-accept="pdf, doc, docx, jpg, jpeg, png"/>
    </div>                                                         
</div>

脚本

$(document).on('click','.close',function(){
    $(this).parents('span').remove();
})
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
    var files = $('#uploadBtn')[0].files;
    for (var i = 0; i < files.length; i++) {
     $("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
    }
    document.getElementById('filename').value = filename;
}

这是多文件的小提琴http://fiddle.jshell.net/37zjr70k/

我不得不把脚本分开，因为它不能同时运行。

$(document).ready(function () {
 $("#uploadBtn1").on("change", function () {
 $("#application").attr('checked','checked');
});
$("#uploadBtn2").on("change", function () {
 $("#application2").attr('checked','checked');
});
});

您可以对多次上传执行相同操作！

相关文章：