アップロード前に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> 

私は、なぜユーザーは、以下の1つのtime.Theコードは、複数の入力バージョンで複数のファイルをアップロードすることはできませ思っていました。

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

別のオプションは、アップロードjQueryのファイルを簡単にするために、このようなOptizillaやCloudinaryなどのサービスを使用して（と任意の操作された場合必要な）ファイルを保存します。 Cloudinaryには、既存のjQueryコードとプロセスを統合するオープンソースのjQueryライブラリがあります。