函数处理的不是变量的最后一条语句？

Question

我正在编写这段代码，目标是：检查是否是PNG，检查是否是256X256，并将img转换为base64以上传到服务器。因此，如果我选择 256 x 256 img，它会加载，但是，如果我在选择 256 x 256 后加载另一个不是 256 x 256 的 img，它会加载，我不知道为什么！我该如何解决？function isFileImage(file) {    const acceptedImageTypes = ['image/png'];    return file && acceptedImageTypes.includes(file['type'])}function importFileandPreview() {  var preview = document.querySelector('img');  var file    = document.querySelector('input[type=file]').files[0];  var reader  = new FileReader();  if (file) {    //read img    reader.readAsDataURL(file);    //verify type    var text = file.type;    if (text === "image/png") {      //load img      reader.addEventListener("load", function () {        //put img on <img> src        //console logs        //console.log(preview);        //console.log("pre_nat_height:"+preview.naturalHeight);      // console.log("pre_nat_width:"+preview.naturalWidth);       //technically check if img is 256 x 256       var old = preview.src;       preview.src = reader.result;        if(preview.naturalHeight === 256 && preview.naturalWidth === 256){          //create a hidden input (works but value is not from last img)          var element = document.getElementById("imga");            if(typeof(element) != 'undefined' && element != null){            document.getElementById("imga").remove();          }            input = document.createElement('input');            input.setAttribute("type","hidden");            input.setAttribute("id","imga");            input.setAttribute("name","img")            input.setAttribute("value",preview.src);            document.getElementById('count').appendChild(input);            delete preview;        }        //else if img is not 256 x 256        else {          preview.src = old;          alert("Must be a PNG and have 256px X 256px!");          delete preview;        }      }, false);// i don't know why false but ye    }  }}<input type="file" id="file" accept="image/PNG" onchange="importFileandPreview()"><br><form id="count"></form>

Answer 1

您需要在预览事件的处理程序内对图像的自然尺寸进行检查load。

你所面临的问题是由于时机不当而不是逻辑错误造成的。更具体地说，它在于您设置新的预览，然后同步src检查加载图像的自然尺寸。

这种方法是错误的，因为图像是异步加载的，因此您的代码不会等待它加载后再继续检查。因此，当您在选择有效图像后选择无效图像时，您仍然会检查前者的尺寸，因为后者尚未加载。

要更正此错误，您必须在预览事件的处理程序内执行检查load，如下所示。

工作片段：

（我重写了该函数以使其更易于阅读）

function isFileImage (file) {

    const acceptedImageTypes = ["image/png"];

    return file && acceptedImageTypes.includes(file["type"])

}

function importFileandPreview () {

    var preview = document.querySelector("img");

    var file    = document.querySelector("input[type=file]").files[0];

    var reader  = new FileReader();

    /* Terminate the function prematurely if the file isn't an image. */

    if (!isFileImage(file)) return;

    /* Load the file into the reader. */

    reader.readAsDataURL(file);

    /* Set the 'load' event of the reader. */

    reader.addEventListener("load", function () {

        /* Create a temporary image to use for the check to avoid flashing. */

        var tempPreview = new Image();

        /* Set the 'load' event of the temporary preview. */

        tempPreview.addEventListener("load", function () {

            /* Check whether the selected image isn't 256x256 pixels. */

            if (this.naturalHeight != 256 || this.naturalWidth != 256) {

                /* Alert the user. */

                alert("Must be a PNG and have 256px X 256px!");

                /* Restore the default src to the preview. */

                preview.src = preview.dataset.defaultSrc;

                /* Terminate the function prematurely. */

                return;

            }

            /* Set the result of the reader as the source of the preview. */

            preview.src = reader.result;

            /* Save the image to the form. */

            saveImageToInput(reader.result);

        });

        /* Set the result of the reader as the source of the image. */

        tempPreview.src = reader.result;

    });

    /* Save the default image in a data-* attribute to use again if needed. */

    preview.dataset.defaultSrc = preview.dataset.defaultSrc || preview.src;

}

function saveImageToInput (image) {

    /* Find the hidden input. */

    var input = document.getElementById("imga");

    /* Check whether the input doesn't exist. */

    if (!input) {

        /* Create a new hidden input. */

        input = document.createElement("input");

        input.setAttribute("id", "imga");

        input.setAttribute("name", "img");

        input.setAttribute("type", "hidden");

        /* Place the input in the form. */

        document.getElementById("count").appendChild(input);

    }

    /* Save the image as the input's value. */

    input.setAttribute("value", image);

}

<input type="file" id="file" accept="image/PNG" onchange="importFileandPreview()"><br>

<img src=" data:image/png;base64,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" height="256" width="256">

<form id="count">

</form>

笔记：

1. 最好使用临时预览来检查所选图像是否满足您的条件，因为如果您将其加载到可见预览中然后提醒用户，则将显示加载的图像。

2. delete preview: 不要这样做。JavaScript 中的变量不应该像这样被删除。

3. 传递给的第三个参数addEventListener确定事件是在冒泡阶段还是捕获阶段捕获。默认情况下，它是false，因此您可以省略它。