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

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

行動規範の内容に同意します

回答2件

こんな感じで

javascript
1<?PHP
2print_r($_FILES);//自分自身に送ってファイルを確認する
3?>
4<style>
5.droppable{
6border:1px solid;
7position:relative;
8height:300px;
9}
10.droparea{
11position:absolute;
12top:0;
13width:100%;
14height:100%;;
15opacity:0;
16background-Color:lime;
17}
18#preview img{
19  max-width:100px;
20  max-height:100px;
21}
22</style>
23<script>
24window.addEventListener('DOMContentLoaded', ()=>{
25  const list=[];
26  document.querySelector('.droparea').addEventListener('change',e=>{
27    list.length=0;
28    var target=e.target;
29    document.querySelector('#preview').textContent="";
30    [...target.files].forEach((file,idx)=>{
31      if(file !==undefined){
32        var fr = new FileReader();
33        fr.addEventListener('load',e=>{
34          var type=file.type;
35          var name=file.name;
36          if(["image/jpeg","image/gif","image/png"].includes(type)){
37            var blob=new Blob([e.target.result],{type});
38            var binary=String.fromCharCode.apply("",new Uint8Array(e.target.result));
39            var base64="data:"+file.type+";base64,"+btoa(binary);
40            var img=Object.assign(document.createElement('img'),{src:base64});
41            list.push({blob,name});
42            img.addEventListener('click',()=>{
43              list[idx]=false;
44              console.log(list);
45              img.remove();
46            });
47            document.querySelector('#preview').appendChild(img);
48          }else{
49            target.value="";
50          }
51        });
52        fr.readAsArrayBuffer(file);
53      }
54    });
55  });
56  document.addEventListener('submit',(e)=>{
57    document.querySelector('[type=file]').disabled=true;
58  });
59  document.addEventListener('formdata',(e)=>{
60    list.forEach(x=>{
61      if(x) e.formData.append(document.querySelector('[type=file]').name,x.blob,x.name);
62    });
63  });
64});
65</script>
66<form method="post" enctype="multipart/form-data">
67<div class="droppable">
68<div>ドロップして</div>
69<input type="file" class="droparea" name="myfile[]" multiple>
70</div>
71<input type="submit">
72<div id="preview"></div>
73</form>