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)
});

＆＃13;

$(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);
    }
}

＆＃13;

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

＆＃13;

Answer 2

当用户选择文件时调用onchange事件，但此时文件本身不可访问。要显示它，您需要用户通过<form>发布它，然后保存它。从那里，你将能够展示它。

在许多现代网站上，由于使用了AJAX调用，这个过程看起来很透明：

onchange事件调用jQuery函数，实际上将表单（和图像）发送到php文件。此文件保存图像，然后返回相应的<img>标记，填充正确的属性src，将通过Ajax回调附加到页面上。

追加浏览文件输入不显示预览图像

2 个答案: