在上傳之前上傳多個文件圖像並在jQuery中預覽

Question

我想讓我的網站上的用戶上傳多張照片，並使用jQuery預覽一次，但我的問題是，第一個文件一旦更改預覽，然後追加一個新的文件輸入，但附加的文件不會在更改時預覽一次。

我不知道這個問題我一直試圖弄清楚現在幾個小時，但還沒有。

$(function(){ 
 
    $(".append_pre_p_v div input[type=file]").on("change",function(){ 
 
    var filecount = $(".append_pre_p_v").children("div").length; 
 
     //var idnum = filecount + 1; 
 
     var filereader = new FileReader(); 
 
     var img = $(this).siblings("img"); 
 
     filereader.onloadend = function(){ 
 
     img.attr("src",this.result).css({"width":"150px","height":"150px"}); 
 
     }; 
 
     filereader.readAsDataURL(this.files[0]); 
 
     $(this).siblings("label").hide(); 
 
     var filearray = "<div class='filearray'><img src=' ' ><input type='file' name='file[]' id='file"+idnum+"'> <label for='file"+idnum+"'><img src='mediaimages/francis.jpg' width='150px' height='150px'></label></div>"; 
 
     $(".append_pre_p_v").append(filearray); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="append_pre_p_v"> 
 
    <div class="filearray"> 
 
    <img src="" /> 
 
    <input type="file" name="file[]" id="f_p_v_up1" />  
 
    <label for="f_p_v_up1"> 
 
     <img src="mediaimages/francis.jpg" width="150px" height="150px" /> 
 
    </label> 
 
    </div> 
 
</div>

Answer 1

我不知道我是否理解您的問題well.When一個圖像預覽和用戶增加了一個形象，但前面的圖像消失了，對不對？ 我對代碼做了一些更改，使答案更清晰。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="append_pre_p_v"> 
    <div class="filearray"> 
    </div> 
    <input type="file" name="file[]" id="f_p_v_up1" /> 
</div> 
<script> 
    $(document).on('ready',()=>{ 
    $("#f_p_v_up1").on('change',function(){ 
     var filereader = new FileReader(); 
     var $img=jQuery.parseHTML("<img src=''>"); 
     filereader.onload = function(){ 
      $img[0].src=this.result; 
     }; 
     filereader.readAsDataURL(this.files[0]); 
     $(".filearray").append($img); 
    }); 
    }); 
</script> 

我想知道爲什麼不讓用戶一次上傳多個文件。下面的代碼是多輸入版本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="append_pre_p_v"> 
    <div class="filearray"> 
    </div> 
    <input type="file" name="file[]" id="f_p_v_up1" multiple /> 
</div> 


<script> 
$(document).on('ready',()=>{ 
    $("#f_p_v_up1").on('change',function(){ 

     $(".filearray").empty();//you can remove this code if you want previous user input 
     for(let i=0;i<this.files.length;++i){ 
      let filereader = new FileReader(); 
      let $img=jQuery.parseHTML("<img src=''>"); 
      filereader.onload = function(){ 
       $img[0].src=this.result; 
      }; 
      filereader.readAsDataURL(this.files[i]); 
      $(".filearray").append($img); 
     } 


    }); 
}); 
</script> 

希望這會有所幫助。

Answer 2

還有其他方法可以實現文件預覽&上傳。你可以使用jQuery插件，在搜索時我在GitHub上找到了一個來自opoloo的插件。我相信還有很多其他人。

或者你可以使用一些JavaScript，並創建一個預覽功能，這裏是從codexworld.com一個例子：

function filePreview(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#uploadForm + img').remove(); 
      $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>'); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

另一種選擇是使用諸如Optizilla或Cloudinary服務，以簡化的jQuery文件上傳（如果有任何操作期望的）文件。 Cloudinary擁有開源的jQuery庫，可以將流程與現有的jQuery代碼進行整合。