Question

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

这是我的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

这是因为click事件与动态添加的元素无关。在这种情况下，您应该使用event delegation。

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

此外，由于ID是使用固定的模式启动动态生成的，因此您可以在使用事件委派绑定事件时使用属性start with selector：

$('.photos').on('change','[id^=file]',function(){

Answer 2

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

在动态生成元素时，您需要使用委托事件方法Event Delegation。由于您已使用具有fileup输入控件的公共类file。 将您的代码更改为，

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

动态生成输入type =“file”元素以进行多次上传

2 个答案: