个人中心
gpt4 book ai didi

html - 尝试使用 appscripts 将多个文件上传到 Google 云端硬盘

转载 作者：太空狗 更新时间：2023-10-29 13:17:06 25 4
gpt4 key购买 nike

我正在尝试更改 ctrlq 的代码(可在此处找到:http://ctrlq.org/code/19747-google-forms-upload-files)以上传多个文件而不是 1 个文件。

这是我目前所拥有的: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？

谢谢

最佳答案

首先请注意 multiple HTML 上的属性 <input>标签是在 HTML5 上引入的，并且仅受现代浏览器支持(例如，对于来自 Gecko 1.9.2 的 Firefox，它将来自 3.6 版)

现在，要为多个文件上传设置 HTML 表单，您必须:

  • 明确指定您的 HTML 文档是 HTML5。您的文档必须以:

    <!DOCTYPE html>

  • 为了正确上传文件到您的服务器，您必须设置您的表格 enctype属性为 multipart/form-data :

    <form id="myForm" enctype="multipart/form-data">

  • 您还必须指定您的文件 input标记为多个 fileinput使用 multiple attribute 标记.你好像有这是正确的，但以防万一尝试:

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

    相反。

在 for 中也(至少)有几个问题用于处理所选文件的 Javascript 代码循环；您正在引用 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);
}

我强烈建议您查看 super 有用的 MDN mini tutorial on handling file uploads有关详细信息和示例。

此外，如果您愿意添加库和插件，bootstrap fileinput是一个非常有用的工具，非常容易合并和用于您想要的任何形式。

在任何情况下，您最终都会得到一个发送文件数组的表单，您也可以在客户端上以 FileList 的形式访问这些文件。对象存储在 files property 上包含 File 的输入元素对象，而不仅仅是单个文件元素。如上代码所示，您可以访问此 FileList 中的任何文件。对象作为数组 ( input.files[i] )。

关于html - 尝试使用 appscripts 将多个文件上传到 Google 云端硬盘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31664648/

25 4 0
文章推荐： html - Angular Material layout-align center 不影响小模式下的文本
文章推荐： ruby-on-rails - bundle install 导致 git clone 错误。不确定此响应的含义
文章推荐： git - 设置 git 推送到另一个用户的 Github 仓库？
文章推荐： html - ARIA 组合框的 IE 兼容标记
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com