知道用户上传的文件是否在 p5.js 中加载答案

【问题标题】：knowing if the file uploaded by user was loaded in p5.js知道用户上传的文件是否在 p5.js 中加载
【发布时间】：2021-07-13 09:13:14
【问题描述】：

我如何知道用户上传的文件是完全加载还是正在加载。

我想在加载完成后显示“您已成功上传”，所以我知道文件是否已完全上传...

BTW 文件可以由用户创建此代码来加载。输入 = createFileInput(handleFile);

【问题讨论】：

标签： p5.js

【解决方案1】：

假设您将来自<input> 的文件与loadImage() 之类的函数一起使用，p5.js 中的所有loadXXX 函数都采用成功和失败回调函数参数，这些参数在图像完成加载时执行.

let input;
let img;

function setup() {
  input = createFileInput(handleFile);
  input.position(0, 0);
}

function draw() {
  background(255);
  if (img) {
    image(img, 0, 0, width, height);
  }
}

function handleFile(file) {
  print(`File selected: ${file.name}`);
  img = loadImage(
    file.data,
    () => print('Image Loaded Successfully.'),
    () => print('Image Failed to Load.'),
  );
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"&gt;&lt;/script&gt;

记录一下，当使用像这样的文件输入元素时，实际上并没有“上传”任何东西，只是加载到浏览器中。

【讨论】：

非常感谢您的回复！！！真的很管用！！顺便问一下，如何在 mp3 上传时显示加载中的 gif 图像？
如我所说。没有“上传”，但如果您想在解析/处理声音文件时显示某些内容，您应该能够在调用 handleFile 函数时设置一个标志，当设置该标志时显示您想要的任何加载图形在 draw() 函数中，然后在调用 loadImage 回调函数之一时取消设置标志。但是，由于浏览器的主线程可能正忙于处理文件，我不确定 draw() 实际会被调用多少次。
至于显示gif文件具体见stackoverflow.com/questions/49650025/…