javascript - 多个、单个输入文件表单字段

问题描述

我想做什么

单击“提交”按钮时，我正在尝试运行一个函数，该函数将遍历所有<input type="file">字段并将文件提交到 Google Drive。我在这里修改了原始代码。它可以按预期使用单个文件输入字段。

问题

请参阅 2019 年 2 月 8 日下方的编辑

我无法让它适用于多个<input type="file">领域。我试图创建一个函数来确定给定字段是否为空。如果是，请跳过它并继续下一个。我现在所拥有的不起作用。

其他

按下按钮时整个屏幕变白。不知何故，这在原始形式和我的小修改中有效，但现在不行，我不明白为什么或如何修复它。

更新：我在控制台中的当前错误显示“未捕获的类型错误：无法读取未捕获的类型错误：无法读取 null 的属性'文档'。

我试过的

请参见此处或下方。

form.html

   <!doctype html>

<head>
  <style type="text/css">
    body {
      background-color: #FFFFFF;
    }

  </style>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <br>
  <br>
  <br>
  <div align="center">
    <p><img src="ENTER URL"></p>
    <table width="459" border="0">
      <tbody>
        <tr>
          <td width="462">
            <div align="center">
              <hr>
            </div>
            <form id="myForm" align="center">

              <label for="teamName">TEAM</label>
              <select name="teamName" id="teamName" name='teamName'></select>

              <label for="myName">YOUR NAME</label>
              <input type="text" name="myName" placeholder="Your name..">

              <label for="myFile">Passes</label>
              <input type="file" name="myFile" id="passes">
              <label for="myFile">Roster</label>
              <input type="file" name="myFile2" id="roster">
              <input type="submit" value="Upload File" id="clickMe" onclick="clickEvent();">
            </form>
            <div id="output"></div>


            <script>
              google.script.run.withSuccessHandler(buildTeamsList)
                .teams();


              function buildTeamsList(teamsArray) {
                var list = teamsArray;
                //var option = document.createElement('option');
                var option = '';

                for (var i = 0; i < list.length; i++) {
                  option += '<option value="' + list[i] + '">' + list[i] + '</option>';
                }

                $('#teamName').append(option);
                //var select = document.getElementById('teamName');
                //select.appendChild(option);

              }

              function clickEvent() {

                var cE = document.getElementById("clickMe")
                cE.value = 'Uploading...';

                var fileCount1 = document.getElementById("passes").files.length
                console.log(fileCount1);
                var fileCount2 = document.getElementById("roster").files.length
                console.log(fileCount2);
                var x = document.getElementById("clickMe").parentNode;
                //document.getElementById("output").innerHTML =x;

                var y = document.getElementById("clickMe").parentNode;
                //document.getElementById("output").innerHTML =y;

                if (fileCount1 > 0) {
                  google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(x);
                  //.writeToSheet;

                } else if (fileCount2 > 0) {
                  google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles2(y);

                } else {
                  return false;
                }


              };


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

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

            </style>
            <hr>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>&nbsp;</h3>
    <p>&nbsp;</p>
  </div>
</body>

Code.gs

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

}

function teams() {

  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('TEAMS');
  var range = sheet.getRange('A2:A1000');
  var values = range.getValues();

    var array1 = [];

  for (var i = 0; i < values.length; ++i) {

    var column = values[i];
    var colA = column[0];


    if (colA != '') {

      array1.push(colA);
    }
  }

    var teamsArray = [];
  while (array1.length) teamsArray.push(array1.splice(0, 1));
  var lengthDivName2 = teamsArray.length;
  var widthDivName2 = teamsArray[0].length;



  Logger.log(teamsArray);
  return teamsArray;

}

function writeToSheet(form) {
  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('submissions');
  var range = sheet.getRange('A2');

  range.setValue(form.myName);

}

function uploadFiles(form) {

  try {

    var dropbox = "Check In Test";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    var blob = form.myFile; 

    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.teamName+ " - Passes");

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

function uploadFiles2(form) {

  try {

    var dropbox = "Check In Test";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    var blob = form.myFile; 

    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.teamName + " - Roster");

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

旁注

如果有人有办法在没有 JQuery的情况下创建我的<select>值列表 ( )，那就太好了。function buildTeamsList(teamsArray)您可以看到上面我已注释掉的行。
很明显，我是在搞科学怪人，但我并不真正理解这一切是如何运作的；耐心是值得赞赏的。
我还尝试了您在此处看到的来自单个字段的多个文件，但问题是我无法弄清楚如何重命名 Code.gs 中的文件，而我可以使用此代码。因为我最终想将数据写入电子表格，所以知道如何做到这一点（就像我可以使用这段代码一样）很重要。

编辑

按照 Tanaike 的建议，我更改了函数以包含括号。
在 Tanaike 的建议下，我再次进行了一些挖掘，发现有要传递给函数的参数。原来是(this.parentNode)。
我试过了，但它仍然不起作用。
我试图选择.parentNode提交按钮（表单）。我在控制台中的当前错误显示"Uncaught TypeError: Cannot read Uncaught TypeError: Cannot read property 'document' of null.

标签： javascripthtmlgoogle-apps-script

对于任何可能遇到此问题的人。我能够通过更改服务器端 (code.gs) 函数来完成这项工作uploadFiles(form)。现在，表单上的一个按钮和一个功能从两个文件输入中收集。

https://jsfiddle.net/nateomardavis/kdpjo4s9/2/

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

}

function teams() {

  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('TEAMS');
  var range = sheet.getRange('A2:A1000');
  var values = range.getValues();

  var array1 = [];

  for (var i = 0; i < values.length; ++i) {

    var column = values[i];
    var colA = column[0];


    if (colA != '') {

      array1.push(colA);
    }
  }

  var teamsArray = [];
  while (array1.length) teamsArray.push(array1.splice(0, 1));
  var lengthDivName2 = teamsArray.length;
  var widthDivName2 = teamsArray[0].length;



  Logger.log(teamsArray);
  return teamsArray;

}

function writeToSheet(form) {
  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('submissions');
  var range = sheet.getRange('A2');

  range.setValue(form.myName);

}

function uploadFiles(form) {

  try {

    var dropbox = "Check In Test";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    var blob = form.myFile;

    var file = folder.createFile(blob);
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.teamName + " - Passes");

    var blob2 = form.myFile2;

    var file2 = folder.createFile(blob2);
    file2.setDescription("Uploaded by " + form.myName);
    file2.setName(form.teamName + " - Roster");

    return "File uploaded successfully " + file.getUrl() + " and " + file2.getUrl();

  } catch (error) {

    return error.toString();
  }

}

javascript - 多个、单个输入文件表单字段

问题描述

解决方案

推荐阅读