首頁猿問函數處理的不是變量的最后一條語句？

函數處理的不是變量的最后一條語句？

JavaScript

繁星coding 2023-06-29 21:03:33

我正在編寫這段代碼，目標是：檢查是否是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>

查看完整描述

1 回答

叮當貓咪

TA貢獻1776條經驗獲得超12個贊

您需要在預覽事件的處理程序內對圖像的自然尺寸進行檢查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);

}

</form>

筆記：

最好使用臨時預覽來檢查所選圖像是否滿足您的條件，因為如果您將其加載到可見預覽中然后提醒用戶，則將顯示加載的圖像。
delete preview: 不要這樣做。JavaScript 中的變量不應該像這樣被刪除。
傳遞給的第三個參數addEventListener確定事件是在冒泡階段還是捕獲階段捕獲。默認情況下，它是false，因此您可以省略它。

反對回復 2023-06-29

1 回答
0 關注
140 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

函數處理的不是變量的最后一條語句？

函數處理的不是變量的最后一條語句？

1 回答

添加回答

函數處理的不是變量的最后一條語句？