p5.js | createFileInput()函数

在p5.js中，createFileInput()函数用于创建一个文件输入元素，使得用户可以从本地计算机选择文件并上传至网页中。

语法

createFileInput(callback, multiple)

• callback（可选）：当文件被上传时的回调函数。
• multiple（可选）：布尔类型，指定是否允许上传多个文件。

示例

以下示例演示了如何使用createFileInput()函数在p5.js中创建一个文件输入元素。

let fileInput;

function setup() {
  createCanvas(400, 400);
  fileInput = createFileInput(handleFile);
  fileInput.position(10, 10);
}

function handleFile(file) {
  print(file);
}

在上面的示例中，将创建一个文件输入元素并将其放置在(10,10)的位置上。当用户选择文件并上传时，handleFile()函数将被调用，并输出文件对象到控制台中。

允许上传多个文件

如果要允许用户上传多个文件，可以将multiple参数设置为true。以下示例演示了如何进行设置：

let fileInput;

function setup() {
  createCanvas(400, 400);
  fileInput = createFileInput(handleFile, true);
  fileInput.position(10, 10);
}

function handleFile(file) {
  print(file);
}

结论

createFileInput()函数是p5.js中非常有用的函数之一，使得用户可以轻松地选择并上传文件。您甚至可以使用回调函数对上传的文件进行自定义处理。