p5.js | createFileInput()函数

createFileInput()函数用于创建一个“文件”类型的输入元素，用户可以使用它来选择要在草图中使用的本地文件。如果需要，它还支持选择多个文件。

句法：

createFileInput(callback, multiple)

参数：该函数接受上面提到的两个参数，如下所述：

• 回调：这是加载文件时将使用的回调函数。它是一个可选参数。
• 多个：它是一个字符串，指定是否允许一次选择多个文件。它可以设置为“真”或“假”。它是一个可选参数。

返回值：它返回指向保存创建文件对象的 p5.Element 的指针。

以下示例说明了 p5.js 中的createFileInput()函数：

示例 1：在此示例中，我们将一个文件作为输入。

function setup() {
  createCanvas(400, 200);
  
  textSize(18);
  text("Click on the file input and select a file.", 20, 20);
  
  inputbtn = createFileInput(processFile);
  inputbtn.position(30, 40);
}
  
function processFile(file) {
  console.log(file);
  text("The name of the file selected is: "+
                                file.name, 20, 80);
  text("The extension of the file selected is: "+ 
                               file.subtype, 20, 100);
  text("The type of the file selected is: "+
                                  file.type, 20, 120);
  text("The size of the file selected is: "+ 
                                  file.size, 20, 140);
}

输出：

示例 2：在此示例中，我们将多个文件作为输入。

let i = 0;
  
function setup() {
  createCanvas(500, 200);
  
  textSize(18);
  text("The file input below allows"+
          " selecting of multiple files.", 20, 20);
  
  inputBtn = createFileInput(processFiles, "true");
  inputBtn.position(30, 60);
}
  
function processFiles(file) {
  text("The name of the file selected is: " + 
                             file.name, 20, 120 + i);
  i = i + 20;
}

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/createFileInput