javascript - 动态生成输入类型为="file"的元素，用于多次上传

Question

我遇到了一些我尝试自己解决的问题。但我没有。我正在创建一个可以一次上传多张图片的脚本。我第一次得到一个输入文件字段，如果有人为上传字段添加了照片，我写了一个 JavaScript，然后自动生成新的上传字段。这是第一次运行良好。成功生成新的上传字段。但它还没有产生第二次。我假设您了解 Bootstrap 。

这是我的 HTML 代码

 <input type ="file" class ="fileup 1" id ="file1">
 <label for ="file1" id ="lbl_upload">
 <span class ="glyphicon glyphicon-plus-sign"></span></label>
 <div class ="photos"> </div>

这是我的 JavaScript 代码

var count = 1;
$("#file1" + count).on('change', '.fileup', function() {
    var files, imagetype, matches;
    files = this.files[0];
    imagetype = files.type;
    matches = ["image/jpeg"];
    var str = "#img_nxt" + count;
    if (!(imagetype == matches[0])) {
        alert("Wrong format");
    } else {
        $('#lbl_upload').remove();
        $('.photos').append("<img id='img_nxt" + count + "' width ='100' height ='100'> ");
        //create a new input file element 
        count++;
        $('.photos').append("<input type =\"file\" class =\"fileup " + count + "\" id =\"file" + count + "\"><label for =\"file" + count + "\" id =\"lbl_upload\"><span class =\"glyphicon glyphicon-plus-sign\"></span></label>");
        //show picture in image element
        var reader = new FileReader();
        reader.onload = function(e) {
            $(str).attr("src", e.target.result);
        }
        reader.readAsDataURL(files);
        return true;
    }
});

这是我的 CSS

[class*="fileup"]{
position:fixed;
top:5000px;
} 

我哪里错了？感谢您花时间为我制定解决方案。

Answer 1

目前您使用的称为“直接”绑定(bind)，它只会附加到您的代码进行事件绑定(bind)调用时页面上存在的元素。

您需要使用 Event Delegation在动态生成元素时使用委托(delegate)事件方法。因为您已经使用带有 file 输入控件的通用类 fileup。 将您的代码更改为，

$('.photos').on('change', '.fileup', function() {
    //Your code
});