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

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) {&nbsp; &nbsp; const acceptedImageTypes = ["image/png"];&nbsp; &nbsp; return file && acceptedImageTypes.includes(file["type"])}function importFileandPreview () {&nbsp; &nbsp; var preview = document.querySelector("img");&nbsp; &nbsp; var file&nbsp; &nbsp; = document.querySelector("input[type=file]").files[0];&nbsp; &nbsp; var reader&nbsp; = new FileReader();&nbsp; &nbsp; /* Terminate the function prematurely if the file isn't an image. */&nbsp; &nbsp; if (!isFileImage(file)) return;&nbsp; &nbsp; /* Load the file into the reader. */&nbsp; &nbsp; reader.readAsDataURL(file);&nbsp; &nbsp; /* Set the 'load' event of the reader. */&nbsp; &nbsp; reader.addEventListener("load", function () {&nbsp; &nbsp; &nbsp; &nbsp; /* Create a temporary image to use for the check to avoid flashing. */&nbsp; &nbsp; &nbsp; &nbsp; var tempPreview = new Image();&nbsp; &nbsp; &nbsp; &nbsp; /* Set the 'load' event of the temporary preview. */&nbsp; &nbsp; &nbsp; &nbsp; tempPreview.addEventListener("load", function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Check whether the selected image isn't 256x256 pixels. */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.naturalHeight != 256 || this.naturalWidth != 256) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Alert the user. */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Must be a PNG and have 256px X 256px!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Restore the default src to the preview. */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preview.src = preview.dataset.defaultSrc;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Terminate the function prematurely. */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Set the result of the reader as the source of the preview. */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preview.src = reader.result;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Save the image to the form. */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; saveImageToInput(reader.result);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; /* Set the result of the reader as the source of the image. */&nbsp; &nbsp; &nbsp; &nbsp; tempPreview.src = reader.result;&nbsp; &nbsp; });&nbsp; &nbsp; /* Save the default image in a data-* attribute to use again if needed. */&nbsp; &nbsp; preview.dataset.defaultSrc = preview.dataset.defaultSrc || preview.src;}function saveImageToInput (image) {&nbsp; &nbsp; /* Find the hidden input. */&nbsp; &nbsp; var input = document.getElementById("imga");&nbsp; &nbsp; /* Check whether the input doesn't exist. */&nbsp; &nbsp; if (!input) {&nbsp; &nbsp; &nbsp; &nbsp; /* Create a new hidden input. */&nbsp; &nbsp; &nbsp; &nbsp; input = document.createElement("input");&nbsp; &nbsp; &nbsp; &nbsp; input.setAttribute("id", "imga");&nbsp; &nbsp; &nbsp; &nbsp; input.setAttribute("name", "img");&nbsp; &nbsp; &nbsp; &nbsp; input.setAttribute("type", "hidden");&nbsp; &nbsp; &nbsp; &nbsp; /* Place the input in the form. */&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("count").appendChild(input);&nbsp; &nbsp; }&nbsp; &nbsp; /* Save the image as the input's value. */&nbsp; &nbsp; 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>笔记：最好使用临时预览来检查所选图像是否满足您的条件，因为如果您将其加载到可见预览中然后提醒用户，则将显示加载的图像。delete preview: 不要这样做。JavaScript 中的变量不应该像这样被删除。传递给的第三个参数addEventListener确定事件是在冒泡阶段还是捕获阶段捕获。默认情况下，它是false，因此您可以省略它。