尝试使用Appscripts上传多个文件到Google Drive

Question

尝试使用Appscripts上传多个文件到Google Drive

10

我试图修改ctrlq的代码（在此处找到：http://ctrlq.org/code/19747-google-forms-upload-files），以便上传多个文件而不是一个。

以下是我目前拥有的：

HTML:

    <form id="myForm">
    <input type="text" name="myName" placeholder="Name">
    <input type="password" name="psw" placeholder="Password">
    <input type="text" name="myFolder" placeholder="Folder Name">
    <input type="file" name="myFile" id="filesID" multiple>
    <input type="submit" value="Upload File" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
</form>

<div id="output"></div>

<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>

<style>
 input { display:block; margin: 20px; }
</style>

谷歌脚本：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {

  try {
    var input = document.getElementById('filesID');
    var dropbox = "User Files";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    for (var i = 0; i < input.length; i++) {
      var file = folder.createFile(input.input[i]);    
      file.setDescription("Uploaded by " + form.myName);
    }
    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

我遇到了错误，提示函数 createFile 无法运行。我认为这是因为 myFile 变量最初不是一个数组所致。我该如何将上传的所有文件放入一个数组中，并对每个文件运行 createFile 函数？

谢谢。

- John Olsen

1

这里是我处理多文件上传的方法: http://stackoverflow.com/questions/28147486/handling-multiple-files-from-an-input-element-in-an-array-with-google-apps-scrip/28161468#28161468 - Spencer Easton

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NotGaeL · Accepted Answer

首先，请注意HTML <input> 标签上的multiple属性是在HTML5中引入的，仅受现代浏览器支持（例如，在Firefox的Gecko 1.9.2中，这将是从版本3.6开始）。

现在，为了设置用于多文件上传的HTML表单，您必须：

明确指定你的HTML文档为HTML5。你的文档必须以以下内容开始：

<!DOCTYPE html>
为了正确上传文件到服务器，你必须将表单enctype属性设置为multipart/form-data：

<form id="myForm" enctype="multipart/form-data">
你还必须将文件input标签指定为多个文件输入标签，使用multiple attribute。你似乎已经做对了，但以防万一，请尝试：

<input type="file" name="myFile" id="filesID" multiple="multiple" />

代替。

您的Javascript代码中处理所选文件的for循环也存在（至少）两个问题；您在引用input.length和input.input[i]时应该引用input.files.length和input.files[i]：

for (var i = 0; i < input.files.length; i++) {
      var file = folder.createFile(input.files[i]);    
      file.setDescription("Uploaded by " + form.myName);
}

我强烈建议您查看超级有用的MDN 有关文件上传处理的迷你教程，以获取详细信息和示例。

此外，如果您愿意添加库和插件，bootstrap fileinput 是相当有用的一种，非常容易在任何表单上进行整合和使用。

无论如何，您最终都将得到一个发送文件数组的表单，您还可以将其作为存储在包含File对象的 files属性上的FileList对象在客户端上访问。如上面的代码所示，您可以将这个FileList对象中的任何文件作为数组（input.files[i]）来访问。