Question

我想做什么

单击“提交”按钮时，我正在尝试运行将遍历所有<input type="file">字段并将文件提交到Google云端硬盘的功能。我修改了原始代码HERE。它可以按预期使用单个文件输入字段。

问题

请参见19年2月8日的修改

我无法在多个<input type="file">字段中使用它。我试图创建一个确定给定字段是否为空的函数。如果是，请跳过它，然后继续进行下一个。我现在所拥有的无法正常工作。

OTHER

按下按钮时，整个屏幕变为白色。不知何故，这可以在原始形式和我的较小修改下工作，但现在不行，我不知道为什么或如何解决。

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

我尝试过的内容

请参见HERE或以下版本。

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();
  }

}

侧注

如果有人可以创建<select>值列表，（function buildTeamsList(teamsArray)）没有JQuery，那就太好了。您可以看到上面我注释掉的行。
很明显，我是弗兰肯斯坦（Frankenstein）一起表演的，了解一切如何运作；感谢耐心。
我还尝试从单个字段中为多个文件查看HERE，但问题是我无法弄清楚如何在Code.gs中重命名文件，而我可以使用此代码。因为我最终想将数据写入电子表格，所以了解如何做到这一点（就像我可以使用这段代码一样）非常重要。

编辑

我更改了功能，以包括Tanaike建议的寄生虫。
在Tanaike的建议下，我做了更多挖掘工作，发现有一些参数要传递给该函数。最初是(this.parentNode)。
我尝试过，但是仍然不起作用。
我试图选择“提交”按钮（表单）的.parentNode。我当前在控制台中显示的错误为"Uncaught TypeError: Cannot read Uncaught TypeError: Cannot read property 'document' of null.

Answer 1

对于可能遇到此问题的任何人。我可以通过更改服务器端（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();
  }

}

多个单一输入文件表单字段

1 个答案: