更改input type=“file”以從數組中獲取值

在將圖像輸入數據庫之前，我使用js顯示用戶的圖像，然后才將它們添加到數據庫中，我設法做到了這一點。但我還想添加一個功能，可以刪除某些圖像。

我有一個輸入type=“file”，從這里我可以從電腦中插入數據。

<div class="form-group"><input class="form__upload" name="images" id="creative---Point19981022--newPostPhoto" type="file" multiple="" accept="image/*"><label for="creative---Point19981022--newPostPhoto">Choose photo</label></div>

為了添加wipper功能，我們將輸入數據存儲在一個對象數組中，我創建了一個新的數組，其中存儲了我要刪除的數據，然后使用array.filter來分離信息。

$this.data('delimg'); -> <div class="delete_image_output" data-delimg="0">x</div>

let prepareArrayList = new Array();

  $(document).on('click','.delete_image_output',function(){
  //Get Image From Fill
  let filesArr = document.getElementById('creative---Point19981022--newPostPhoto').files;
  let arrayImg = [...filesArr];
  //Delegation wich get data-delimg value
  let $this = $(this);
  let renderOutpudId = $this.data('delimg');
  //get value started from data-delimg value
  const delElelemnt = arrayImg[renderOutpudId];
  //push deleted value in a new array which will by use to make a filter
   prepareArrayList.push(delElelemnt)

   //Make a filter with value comming from array with deleted element
   arrayImg = arrayImg.filter(f => !prepareArrayList.includes(f));

    //at the end arrayImg will has the remaining values
    console.log(arrayImg)

});

最后，我設法得到一個包含所選圖像的數組，但是在數據庫中保存信息時出現問題。

但是，如何更改下面結構中的代碼而不是輸入中的值以獲取上面數組中的值？

let createPost = document.querySelector('.createNew--post--creativePoint');
if(createPost){
createPost.addEventListener('submit',(crPos)=>{
    crPos.preventDefault();

    let filesImg = document.getElementById('creative---Point19981022--newPostPhoto').files;
    const postData = new FormData();
        postData.append('title',document.getElementById('creative---Point19981022-create--newPostTitle').value);
        postData.append('link',document.getElementById('creative---Point19981022-create--newPostLink').value);
        postData.append('description',document.getElementById('creative---Point19981022--newPostDescription').value);
        postData.append('datePost',document.getElementById('creative---Point19981022--dataNow').value);
        // Using For loop for miltiple images
        for (let p = 0; p < filesImg.length; p++) {
            postData.append('images', filesImg[p]);
        }
        postData.append('youtubeEmbedVideo',document.getElementById('creative---Point199810022-create-embedIdOnly').value);
        postData.append('author',document.getElementById('creative---Point19981022--authorDate').value);
    
    // Do not allow posts if all fields al empty
    if( document.getElementById('creative---Point19981022-create--newPostTitle').value != "" || 
        document.getElementById('creative---Point19981022--newPostPhoto').files.length != 0  || 
        document.getElementById('creative---Point19981022-create--newPostLink').value  != "" ||
        document.getElementById('creative---Point19981022--newPostDescription').value  != "" ||
        document.getElementById('creative---Point199810022-create-embedIdOnly').value  != ""){
            //createPostFnc(postData);
            console.log(filesImg)
    }else{
        showAlert('error',' No field was filled in, the post cannot be processed');
    }    
});

filesImg而不是輸入值從數組中獲取值并調整結構