追加瀏覽文件輸入不顯示預覽圖像

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回調附加在頁面上。