主页 / 问题 / 1164938
Accepted
Slam
Asked:2020-08-12 16:02:10 +0000 UTC2020-08-12 16:02:10 +0000 UTC

如何在 javascript 中移动 FileList 中的数组元素？

  • 772

将照片上传到网站时，这些照片会显示在图库中。画廊有能力移动图片。如何使在列表中移动照片时，同一张照片会更改其在数组列表中的位置，因为 照片存储在数据库中的顺序与它们在 FileList 数组中的顺序相同。

let arrPhotoList = document.getElementById('uploadgallery').files;

let oldElPhoto = arrPhotoList[evt.oldIndex];
arrPhotoList[evt.oldIndex] = arrPhotoList[evt.newIndex];
arrPhotoList[evt.newIndex] = oldElPhoto;

我尝试使用这种方法，但 FileList 不允许您以这种方式覆盖列表元素。如果突然不可能在 FileList 中进行此类操作，那么如何过滤文件数组并将其写入<input type="file" name="gallery[]" class="hidden" id="uploadgallery" accept="image/*" multiple>

javascript

1 个回答

  1. Best Answer

    1. 创建一个空数组：var arr = [];

    2. 我们将所有上传的照片保存到创建的数组arr中。

      let files = document.getElementById('uploadgallery').files;
for(let i = 0; i < files.length; i++){
    if (!files[i].type.match('image.*')) {
        files.splice(i, 1);
    } else {
        arr.push(files[i]);
    }
}

    3. arr我们按照需要的顺序移动照片（数组元素）：

      arr.splice(from, 1, arr.splice(to, 1, arr[from])[0]);

    4. 我们伪造数据FormData并将其发送到服务器，例如，通过 ajax：

      let fd = new FormData(this);
if(arr.length > 0) {
    for (var i = 0; i < arr.length; i++) {
        fd.append('gallery[]', arr[i]);
    }
}

    PS谢谢你的提示。

    您可以基于 FileList 创建自己的数组，进行必要的操作，使用 FormData 保存。——斯捷潘·卡夏年科

    • 1

相关问题