更改输入类型=“文件”以从数组中获取值答案

【问题标题】：Change input type="file" to get value from array更改输入类型=“文件”以从数组中获取值
【发布时间】：2020-12-11 15:07:38
【问题描述】：

在将图像输入数据库之前，我使用 js 来显示用户的图像，然后再将它们添加到我设法做到的数据库中。但我还想添加一个可以删除某些图像的功能。

我有一个输入 type = "file"，我从其中插入来自 pc 的数据。

<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>

为了添加擦除器功能，我们将输入数据存储在一个对象数组中，我创建了一个新数组来存储我想要删除的数据，然后使用 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 which 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 coming 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 代替输入值从数组中取值并调整结构

【问题讨论】：

标签： javascript html jquery forms

【解决方案1】：

所以，如果我理解正确，您希望发送过滤后的文件数组，而不是 input 选择的所有文件。

我会尝试在filesImg 上使用ternary operator 来检查“过滤数组”是否为空。因为也许用户没有删除任何...

let filesImg = (arrayImg.length>0) ? arrayImg : document.getElementById('creative---Point19981022--newPostPhoto').files;

您必须在全局范围内声明 arrayImg，就像您为 prepareArrayList 所做的那样。

【讨论】：