タイプファイルの動的入力フィールドを追加してプレビュー

ダイナミックなinput of type fileを作成していくつかの画像を追加または削除しました。タイプファイルの動的入力フィールドを追加してプレビュー

ユーザーは、それがタイプフィールドの新しい入力を追加add fieldsをクリックしたとき。ボタンがクリックされたときに入力フィールドを追加するためのコード：

var i = 0; 
    $("#add_more_img").click(function(e){ 
     i++; 
     $("#dynamic_table_field").append('<tr id=row'+i+'><td><button name="remove" id="'+i+'" class="btn btn-danger btn-remove">X</button></td><td><input type="file" name="event_images[]" id="event_images'+i+'" data-panelid="event_images'+i+'" class="form-control images_list" accept="image/gif, image/png, image/jpeg, image/pjpeg" /></td><td id="img_preview_td"><img name="img_preview'+i+'" id="img_preview" /></td></tr>'); 
     alert("Hiiiiii"); 
     e.preventDefault(); 
    });

をユーザーが画像を選択したとき、私はそれが上の写真で赤枠内に表示させたいです。私はすでにそれのためのコードを持っていますが、それは単一の入力フィールドのためにのみ動作します。だから私はそのコードをいくつか変更しようとしましたが、それでも動作しませんでした。コードは次のとおりです。

$(".images_list").change(function() { 
     var input = $(this); 
     var name = $(this).attr("name"); 
     var id = $(this).attr("id"); 
     alert(input); 
     var val = $(this).val(); 
     switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
      case 'gif': case 'jpg': case 'png': case 'jpeg': 
       alert("an image"); 
       alert(name); 
       readURL(this); 
       break; 
      default: 
       $(this).val(''); 
       // error message here 
       alert("not an image"); 
       break; 
     } 
    }); 
    function readURL(input) { 
     var this_id = input.attr("id"); 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       this_id.attr('src', e.target.result); 
       this_id.css({ 
        width:"120px", 
        height:"120px" 
       }); 
      } 
      reader.readAsDataURL(input.files[0]); 
     } 
    }

私が選んだ画像は表示できません。

他の問題は、フォームを送信すると、すべての入力フィールドが削除されて追加されました。どうすればこれを防ぐことができますか？

ありがとうございます。

編集：これを追加しましたJSFiddle。

出典

2016-12-01 bakursait

jsのフィドルを準備することができれば、助けがさらに簡単になります。 – osmanraifgunes

@osmanraifgunes .. JSFiddleを追加しました。 – bakursait

これは動作するサンプルです。私は自分のマシンで試して、今働いています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Title Goes Here</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <style> 
     #div_create_event { 
      margin: 17px 0; 
     } 

     #img_preview_td { 
      outline: 1px solid red; 
      width: 70px; 
     } 

     img { 
      height: 200px; 
      width: 200px; 
     } 
    </style> 
    <script> 
    $(document).ready(function(){ 
     var i = 0; 
     $("#add_more_img").click(function(e){ 
      i++; 
      $("#dynamic_table_field").append('<tr id=row'+i+'><td><button name="remove" id="'+i 
      +'" class="btn btn-danger btn-remove">X</button></td><td><input type="file" onchange="myfn(this)" name="event_images[]" id="event_images'+i 
      +'" data-panelid="event_images'+i+'" class="form-control images_list" accept="image/gif, image/png, image/jpeg, image/pjpeg" />' 
      +'</td><td id="img_preview_td"><img id="img_preview'+i+'" /></td></tr>'); 
      e.preventDefault(); 
     }); 

     $(document).on("click",".btn-remove",function(){ 
      var button_id = $(this).attr("id"); 
      $("#row"+button_id+"").remove(); 
     }); 
    }); 

     function myfn(myinput) { 
      var name = $(myinput).attr("name"); 
      var id = $(myinput).attr("id"); 
      var val = $(myinput).val(); 
      debugger; 
      switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
       case 'gif': case 'jpg': case 'png': case 'jpeg': 
        readURL(myinput); 
        break; 
       default: 
        $(this).val(''); 
        break; 
      } 
     } 


     function readURL(myinput) { 
      debugger; 
      if (myinput.files && myinput.files[0]) { 
        var reader = new FileReader(); 
       reader.onload = function (e) { 
        $('#img_preview' + $(myinput).attr("id").replace('event_images','')).attr('src', e.target.result); 
       } 
       reader.readAsDataURL(myinput.files[0]); 
      } 
     } 


    </script> 
</head> 

<body> 
    <form action="" name="add_event" id="add_event" method="post" enctype="multipart/form-data"> 
     <div class="form-group"> 
      <label for="event_title">Title</label> 
      <input type="text" class="form-control" name="event_title"> 
     </div> 
     <table id="dynamic_table_field"> 
      <tr> 
       <td><button name="add_more_img" id="add_more_img" class="btn btn-success">Add fields</button></td> 
      </tr> 
     </table> 
     <div class="form-group" id="div_create_event"> 
      <input type="submit" class="btn btn-primary" id="create_event" name="create_event" value="Add Event"> 
     </div> 
    </form> 
</body> 

</html>

フォームは現在投稿されていません。

出典

2016-12-01 17:17:19 osmanraifgunes

助けてくれてありがとう、私の友人。それは非常にうまくいく。最後に、 'submit'をクリックすると、すべての入力フィールドが削除されます。私の質問は、「送信」をクリックした後でも、それを（そしてその画像）表示する方法です。 **ユーザに 'e.preventDefault（）'しようとしましたが、これは 'submit'ジョブを停止します**。もう一度ありがとう！ – bakursait

投稿は、このすべてのデータをサーバーに送信します。あなたはファイルをサーバーに保存してから、getメソッドの中でイメージと入力フィールドのID、名前などを返す必要があります。詳細については、別の質問をしてコードを入力してください。 – osmanraifgunes

タイプファイルの動的入力フィールドを追加してプレビュー

答えて

関連する問題