替换数组中 1 个位置的 select 个图像

Question

我有图像数组。

我想通过单击将所选图像移动到数组中的第一个位置

$(document).on('click', '.newProductPic', function () {

$(".newProductPic").removeClass("selectImage");

$(this).addClass("selectImage");

var image = $(".selectImage")[0];
var fReader = new FileReader();

fReader.onloadend = (function (f) {
    return function (e) {

        var base64ImageString = this.result;
        var imageName = f.name;
        imagesListContent.push({ base64ImageString, imageName });

        addThumbMainImage(base64ImageString, f.name);
        currentMainImage = 'newProductPic' + i + '';
    };
})(image);

fReader.readAsDataURL(image);
var temp = $(".newProductPic")[0];

imagesListContent[0] = imagesListContent[selectMainImageId];

imagesListContent[selectMainImageId] = temp;
});

我弄错了：未捕获的类型错误：无法在 'FileReader' 上执行 'readAsDataURL'：参数 1 不是 'Blob' 类型。我做错了什么，这个问题的解决方案是什么？

Answer 1

您提供给 readAsDataURL 的参数应该是文件引用而不是 jquery 对象。

<input type="file" id="files">


document.getElementById('files').addEventListener('change', handleFileSelect, fals)

该函数将接收事件作为参数，您可以通过 event.currentTarget.files 获取文件引用。这是一个数组

另一种方法是从输入元素的文件数组中获取文件引用。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

替换数组中 1 个位置的 select 个图像

Replace select image on 1 place in array

javascript

base64

filereader