javascript - 附加浏览文件输入不显示预览图像

Question

我正在使用 JavaScript。我已经附加了像

这样的 html

<input type="file" class="browse-02 validate[required]" onchange="showMyImage1(this,'thumbnil4')" name="data[question1][question_image4]" id="" />
<img id="thumbnil4" src="images/no_status_image_sp.jpg" class="uploadimg" alt="">

当点击“添加更多”按钮时，该 html 会动态出现。

我写的js如下所示:

function showMyImage1(fileInput,id) {
//console.log(fileInput);
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;
    if (!file.type.match(imageType)) {
        continue;
    }

    //alert(id);
    var img = document.getElementById(id);//$("#"+id)[0];
    //alert(img);
    console.log(img);
    img.file = file;
    var reader = new FileReader();
    reader.onload = (function(aImg) {
        //alert(aImg);
        return function(e) {
            aImg.src = e.target.result;
        };
    })(img);
    reader.readAsDataURL(file);
}
}

这里，这个js不适用于附加数据。它在 img.file = file; 行给出错误，因为 img is null。

那么我应该写什么 JavaScript 呢？

Answer 1

更新

我稍微修改了你的代码，问题是为什么它不起作用，因为元素是在 DOM 中动态创建的。所以普通的事件监听器不会触发。

要监听动态创建元素的事件，请使用 Jquery on API。

$(document).on('change','.browse-btn', function(){
   var thumbnailId = $(this).prev().attr('id');
    showMyImage1(this, thumbnailId)
});

$(document).ready(function() {
        var n = 5;
        var i = 2;
        var j = 10;
        var k = 2;
        
        $('.addmore').click(function(e){
            e.preventDefault();
            var div = $('#appendData');
            var html  = '';
            html  += '';
            html  += '<div class="formPartd">';
            html  += '<div class="formPartd_left">';
            html  += '<div class="upload-img">';
            html  += '<label>Upload Image'+n+'</label>';
            html  += '<span>';
            html  += '<img id="thumbnil'+j+'" src="" class="uploadimg" alt="">';   
            html  += '<input type="file" class="browse-btn" name="data[question1][question_image'+n+']" />';
             html  += '</span>';
            html  += '<div class="clear10"></div>';
            html  += '</div>';
            html  += '<div class="fildtpart3 pos">';
            html  += '<label>Answer'+n+'</label>';
            html  += '<span><input type="text" class="validate[required]" id="" value=""></span>';
            html  += '<div class="clear10"></div>';
            html  += '</div>';
            html  += '</div>';
            div.append(html);  
            i++;j++;n++;
           // $(document).trigger('updated');

        });
        
        $(document).on('change','.browse-btn', function(){
        		var thumbnailId = $(this).prev().attr('id');
        		showMyImage1(this, thumbnailId)
        })
    });

function showMyImage1(fileInput,id) {
	//console.log(fileInput);
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
            continue;
        }
      
        //alert(id);
        var img = document.getElementById(id);//$("#"+id)[0];
        //alert(img);
        //console.log(img);
        img.file = file;
        var reader = new FileReader();
        reader.onload = (function(aImg) {
        	//alert(aImg);
            return function(e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="appendData"></div>

<div class="fildtpart2" style="float:right">
               <a href="" type="button " class="csv_button addmore " style="float:right;background:#5a9325">Add More</a>
            </div>