htmlで画像ファイルを複数同時に選択しアップロードする際に、プレビュー表示が出来る、画像1枚ずつに対して削除が出来るようなライブラリを探しています。

Question

タイトルに記載した機能が含まれているライブラリを探しています。
画像ファイルを複数アップロードする必要があり、アップロード前にプレビューで確認をしつつ、不必要なファイルを削除する機能が欲しいです。
お手数おかけしますがご存知の方がいらっしゃいましたら教えて頂けると助かります。
よろしくおねがいします。

Answer 1

こんな感じで

<?PHP
print_r($_FILES);//自分自身に送ってファイルを確認する
?>
<style>
.droppable{
border:1px solid;
position:relative;
height:300px;
}
.droparea{
position:absolute;
top:0;
width:100%;
height:100%;;
opacity:0;
background-Color:lime;
}
#preview img{
  max-width:100px;
  max-height:100px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const list=[];
  document.querySelector('.droparea').addEventListener('change',e=>{
    list.length=0;
    var target=e.target;
    document.querySelector('#preview').textContent="";
    [...target.files].forEach((file,idx)=>{
      if(file !==undefined){
        var fr = new FileReader();
        fr.addEventListener('load',e=>{
          var type=file.type;
          var name=file.name;
          if(["image/jpeg","image/gif","image/png"].includes(type)){
            var blob=new Blob([e.target.result],{type});
            var binary=String.fromCharCode.apply("",new Uint8Array(e.target.result));
            var base64="data:"+file.type+";base64,"+btoa(binary);
            var img=Object.assign(document.createElement('img'),{src:base64});
            list.push({blob,name});
            img.addEventListener('click',()=>{
              list[idx]=false;
              console.log(list);
              img.remove();
            });
            document.querySelector('#preview').appendChild(img);
          }else{
            target.value="";
          }
        });
        fr.readAsArrayBuffer(file);
      }
    });
  });
  document.addEventListener('submit',(e)=>{
    document.querySelector('[type=file]').disabled=true;
  });
  document.addEventListener('formdata',(e)=>{
    list.forEach(x=>{
      if(x) e.formData.append(document.querySelector('[type=file]').name,x.blob,x.name);
    });
  });
});
</script>
<form method="post" enctype="multipart/form-data">
<div class="droppable">
<div>ドロップして</div>
<input type="file" class="droparea" name="myfile[]" multiple>
</div>
<input type="submit">
<div id="preview"></div>
</form>

Answer 2

DropzoneJSはどうですか？