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

Question

我正在做一个表单，在用户上传文件后，该复选框将自动选中，以便用户知道他们的文件已上传。

在表单中，会有几个“文件上传输入”和一个“多个文件上传输入”，每一个旁边都会有一个复选框，文件上传后会自动勾选。

这是我的文件上传代码

<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;
}

这是 fiddle 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;
}

这里是多个文件的 fiddle http://fiddle.jshell.net/37zjr70k/

我必须将脚本分开，因为它无法同时运行。

Answer 1

$(document).ready(function () {

 $("#uploadBtn1").on("change", function () {

 $("#application").attr('checked','checked');

});
$("#uploadBtn2").on("change", function () {

 $("#application2").attr('checked','checked');

});
});

您可以对多个上传执行相同的操作!