アップロード前に複数の画像を選択して削除する

Question

複数の画像を追加したり、プレビューしたり、削除したり、ajaxを使用しないでいくつかのフィールドを追加するプラグインを探しています。

私はfineUploaderとdropzoneのようないくつかの非常に良いプラグインを見つけましたが、彼らはajaxで提出します。これらのプラグインでは、私はajaxなしで提出する方法を理解していません。

Answer 1

あなたは、彼らはあなたがここで見つけることができます設定可能なオプションのリストを持っているDropzoneJS

を使用することができます。 Dropzone JS Usage.

さらにカスタマイズが必要な場合は、独自のコードを追加する必要があります。これにより、1000行のコードを書くのに役立ちます。 AJAX要求なし

：

これはあなたを助けるかもしれません。 Click here!

Answer 2

私は削除して AJAXせずに、いくつかの余分なフィールドを提出し、multiple images、previewingを追加することができますプラグインを探しています。

複数の画像 ---> jqueryのは----->高不可能つの画像ずつ除去する除去

をプレビュー ----><input type='file' id="myfiles" multiple="multiple" name="files[]">

ファイルリストからは、APIは読み込み専用ですが、削除ボタンをクリックするとファイルリスト全体をクリアできます。

ajaxなし ---->コントローラ/ハンドラのフォームにちょうど動作します。

上記のプラグインのいずれかを使用するのに必要なものを達成する方法はないと思います。

私は現在考えている2つのオプションがあります。

1. その後、uがロードされている画像をプレビューするためにjqueryのを使用することができ、ファイルの入力タイプに複数の属性を使用しますが、我々はfilelistから1で画像1を削除することはできませんが、我々は唯一の削除することができますプレビューからの画像ですが、サーバ側ではまだ画像を処理していますが、上記のようにファイルリスト全体をクリアすることもできます。

OR

1. 我々は追加しますより多くの画像を追加するボタンがあり、その後、このように我々は時間を追加する一枚の画像を追加することができ、jqueryのを使用して動的にfileフィールドを追加することができます新しいfileがフォームに入力されます。これにより、サーバー側で処理する前にイメージを1つずつ削除することができます。

オプション1

$('document').ready(function() { 
 
     var images = function(input, imgPreview) { 
 
    
 
      if (input.files) { 
 
       var filesAmount = input.files.length; 
 
    
 
       for (i = 0; i < filesAmount; i++) { 
 
        var reader = new FileReader(); 
 
    
 
        reader.onload = function(event) { 
 
         $($.parseHTML("<img class='pic'>")).attr('src', event.target.result).appendTo(imgPreview); 
 
        } 
 
        reader.readAsDataURL(input.files[i]); 
 
       } 
 
      } 
 
    
 
     }; 
 
    
 
     $('#myimg').on('change', function() { 
 
      images(this, '#previews'); 
 
     }); 
 
      
 
      //clear the file list when image is clicked 
 
     $('body').on('click','img',function(){ 
 
      $('#myimg').val(""); 
 
      $('#previews').html(""); 
 
    
 
     }); 
 
    });

img{ 
 
    cursor: pointer; 
 
    }

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 

 
<form id="form1" enctype="multipart/form-data" action="server.php" method="post"> 
 
    <input type='file' id="myimg" multiple="multiple"> 
 
    <div id="previews"></div> 
 
     <p>&nbsp;</p> 
 
    <button type="submit">Submit</button> 
 
</form>

オプション2

var abc = 0; 
 
     $('#add_more').click(function() 
 
      { 
 
       $(this).before($("<div/>",{id: 'filediv'}).fadeIn('slow').append($("<input/>", 
 
          { 
 
           name: 'file[]', 
 
           type: 'file', 
 
           id: 'file' 
 
          }), 
 
          $("<br/><br/>") 
 
         )); 
 
      }); 
 
     $('body').on('change', '#file', function() 
 
      { 
 
       if (this.files && this.files[0]) 
 
       { 
 
        abc += 1; //increementing global variable by 1 
 
        var z = abc - 1; 
 
        var x = $(this) 
 
         .parent() 
 
         .find('#previewimg' + z).remove(); 
 
        $(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>"); 
 
        var reader = new FileReader(); 
 
        reader.onload = imageIsLoaded; 
 
        reader.readAsDataURL(this.files[0]); 
 
        $(this) 
 
         .hide(); 
 
        $("#abcd" + abc).append($("<img/>",{ 
 
           id: 'img', 
 
           src: 'x.png', //the remove icon 
 
           alt: 'delete' 
 
          }) .click(function() 
 
          { 
 
           $(this) 
 
            .parent() 
 
            .parent() 
 
            .remove(); 
 
          })); 
 
       } 
 
      }); 
 
     //image preview 
 
     function imageIsLoaded(e) 
 
     { 
 
      $('#previewimg' + abc) 
 
       .attr('src', e.target.result); 
 
     };

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
<form method="POST" action="server.php" enctype="multipart/form-data"> 
 
    <div class="col-md-3 col-sm-3 col-xs-3"> 
 
      <div id="filediv"><input name="file[]" type="file" id="file"/></div> 
 
    <input type="button" id="add_more" class="btn btn-primary" value="Add More Files"/><br><br> 
 
    
 
    <button type="submit" class="btn btn-success">Submit</button> 
 
</form>

私はこのより多くのespオプション2がトリック、画像の選択、さらにプレビューの削除の追加を行うことができると信じています。その後、送信ボタンを押してからサーバー上で処理を行います。プレビュー画像にスタイリングを追加することができます

Goodluck