Question

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

在表单中，文件上传输入很少＆＃34;和一个＆＃34;多个文件上传输入＆＃34;，每个文件上面都会有一个复选框，在文件上传后会自动检查。

这是我的文件上传代码

<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/

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

Answer 1

$(document).ready(function () {

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

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

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

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

});
});

您可以为多次上传做同样的事情！

当文件上传（多个）完成时，该复选框将自动检查

1 个答案: