遍历函数参数/使用 `new Image()` 实例创建的图像

Question

我有一个使用 new Image() 创建的图像缩略图，它基本上显示了在提交表单之前要上传的图像的缩略图。

我有 PHP 处理后端上传的验证。如果图片小于 4 MB，则图片在后端上传失败，我想用 javascript 向特定缩略图附加一条消息 javascript。

下面的函数在具有 oninput 属性的表单中调用，并采用参数 file.

问题

因为我本质上是在遍历 file 参数，所以我不知道如何每次循环 new Image() 实例创建的图像，所以它只显示错误相关图片。

非常感谢任何帮助。

function updateThumbnail(file) {
    if (file.type.startsWith('image/')) {

        let 
        uploadImageWrapper = document.createElement('figure'),
        thumbnailElement = new Image();
    
        // image thumbnail
        thumbnailElement.classList.add('drop-zone__thumb')
        thumbnailElement.src = URL.createObjectURL(file)
    
        // appending elements
        showSelectedImages.append(uploadImageWrapper) // <figure> element
        uploadImageWrapper.append(thumbnailElement) // image thumbnail

        // error messaging for file size
        let thumbnails = document.querySelectorAll('.drop-zone__thumb'),
        sizeError = `<p>Image must be bigger than 4MB</p>`

        thumbnails.forEach(img => {
            if (img.size < 4000000) {
                img.insertAdjacentHTML('afterend', sizeError)
            }
        })

        console.log(img.size)
        console.log(thumbnailElement)

    }

} // end of 'updateThumbnail' function

// ---  updateThumbnail(file) is called in the HTML with an `oninput` attribute in the form

Answer 1

该函数处理一个图像文件并为其添加一个缩略图，那么为什么不当时只处理该图像文件的 sizeError。

随心所欲

if (file.size < 4000000) {
  thumbnailElement.insertAdjacentHTML('afterend', sizeError);
}

并删除 thumbnails 变量和周围的代码。

遍历函数参数/使用 `new Image()` 实例创建的图像

Loop Through A Function Parameter / Images Created With A `new Image()` Instance

parameters

loops

blob

function