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

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

UPDATE

我修改你的代码一点点，为什么它，因为元素在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(){ 
 
     \t \t var thumbnailId = $(this).prev().attr('id'); 
 
     \t \t showMyImage1(this, thumbnailId) 
 
     }) 
 
    }); 
 

 
function showMyImage1(fileInput,id) { 
 
\t //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) { 
 
     \t //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>

Answer 2

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

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

onChange事件调用一个jQuery的功能，即实际发送的形式（和图像）到PHP文件。该文件保存图像，然后返回相应的<img>标记，填充正确的属性src，该标记将通过Ajax回调附加在页面上。