计算for循环中插入的div

时间:2019-04-11 14:35:31

标签: jquery file input

我想使用for循环获取插入的div总数。我想让它能够构造一个可以告诉 需要为图像构造滑块的系统。

这是我的代码,用于在用户选择图像文件时插入div:

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        $("#imgupload").on("change", function(e) {
            var files = e.target.files,
            filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i];
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $("<div class=img-holder>" +
                        "<button type='button' class='img-close'><img src='../Image/icon-close.png'></button>"+
                        "<img class='upload-img' src='" + e.target.result + "'/>" +
                    "</div").insertAfter("#img-first");
                        $(".img-close").click(function(){
                        $(this).parent(".img-holder").remove();
                    });
                });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }
});

我尝试这样做:

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        var promises = [];
        var countimg = $("#imgupload").on("change", function(e) {
            var files = e.target.files,
            filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i];
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $("<div class=img-holder>" +
                        "<button type='button' class='img-close'><img src='../Image/icon-close.png'></button>"+
                        "<img class='upload-img' src='" + e.target.result + "'/>" +
                    "</div").insertAfter("#img-first");
                        $(".img-close").click(function(){
                        $(this).parent(".img-holder").remove();
                    });
                });
                fileReader.readAsDataURL(f);
            }
        });
        promises.push(countimg);
        $.when.apply(null, promises).done(function(){
            alert($('.img-holder').length);
        })
    } else {
        alert("Your browser doesn't support to File API")
    }
});

但是它不起作用。它只警告0。

0 个答案:

没有答案