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

append browse file input does not show preview image

本文关键字：图像 显示 浏览 文件 输入 追加      更新时间：2023-09-26

我正在使用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呢？

更新

我对您的代码做了一点修改，问题是它为什么不起作用，因为元素是在DOM中动态创建的。所以正常的事件监听器不会触发。

若要从动态创建的元素中侦听事件，请在API上使用Jquery。

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

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

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

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

相关文章：