Javascript 多个单输入文件表单字段_Javascript_Html_Google Apps Script

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

javascript html google-apps-script

Javascript 多个单输入文件表单字段,javascript,html,google-apps-script,Javascript,Html,Google Apps Script,我想做的事单击“提交”按钮时，我正在尝试运行一个函数，该函数将遍历所有字段并将文件提交到Google Drive。我修改了原始代码。它可以按预期使用单个文件输入字段问题请参见以下19年8月2日的编辑我无法使它在多个字段中工作。我试图创建一个函数来确定给定字段是否为空。如果是，跳过它，继续下一步。我现在拥有的东西不起作用了其他按下按钮时，整个屏幕变为白色。不知怎的，这是在原来的形式和我的小修改，但不是现在，我不明白为什么或如何修复它更新：控制台中的当前错误显示“Uncaught T

我想做的事

单击“提交”按钮时，我正在尝试运行一个函数，该函数将遍历所有

字段并将文件提交到Google Drive。我修改了原始代码。它可以按预期使用单个文件输入字段

问题

请参见以下19年8月2日的编辑

我无法使它在多个

字段中工作。我试图创建一个函数来确定给定字段是否为空。如果是，跳过它，继续下一步。我现在拥有的东西不起作用了

其他

按下按钮时，整个屏幕变为白色。不知怎的，这是在原来的形式和我的小修改，但不是现在，我不明白为什么或如何修复它

更新：控制台中的当前错误显示“Uncaught TypeError:无法读取Uncaught TypeError:无法读取null的属性“document”

我尝试过的

见下表

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>

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

}

旁注

如果有人有办法，我可以创建我的

值列表（

函数buildTeamsList（teamsArray）

）没有JQuery，那就太好了。你可以看到上面我注释掉的几行

很明显，我是科学怪人，我真的不知道理解这一切是如何运作的；耐心是值得赞赏的

我还尝试了您在单个字段中看到的多个文件，但问题是，我不知道如何重命名Code.gs中的文件，而我可以使用此代码。因为我最终希望将数据写入电子表格，所以知道如何这样做（正如我可以使用此代码一样）很重要

编辑

正如塔奈克所建议的，我改变了函数以包含偏执

我又做了一些挖掘，注意到在Tanaike的建议下，有一些参数要传递给函数。最初它是

（this.parentNode）

我试过了，但还是不行

我试图选择submit按钮（表单）的

.parentNode

。我当前在控制台中的错误显示

“未捕获类型错误：无法读取未捕获类型错误：无法读取null的属性“document”。

对于任何可能遇到这种情况的人。我可以通过更改服务器端（code.gs）函数

uploadFiles（form）

来实现这一点。现在，表单上的一个按钮和一个函数从两个文件输入中收集

函数doGet（e）{
返回HtmlService.createhtmloutpfromfile（'form.html'）；
}
职能小组（）{
var ss=SpreadsheetApp.openById（'MYID'）；
var sheet=ss.getSheetByName（“团队”）；
var范围=sheet.getRange（'A2:A1000'）；
var values=range.getValues（）；
var array1=[]；
对于（变量i=0；i

虽然我不确定要为GAS函数提供的参数，但在脚本中，为了运行GAS函数，请修改为

google.script.run.withSuccessHandler（fileupload.uploadFiles（）

和

google.script.run.withSuccessHandler（fileupload.uploadFiles2（）。请将（）
添加到两个函数名中。啊，我确实错过了这一点，以及传递的参数。最初它是上传文件（this.parentNode）也不起作用。同样，控制台中没有错误。单击按钮时，屏幕将变为白色。我应该传递什么样的论据才能让这一切顺利进行？我更新了我的问题和小提琴你应该通过表单节点。这个
在你的脚本中指的是什么？我更新了问题和我的代码。基本上，我尝试选择submit按钮（表单）的.parentNode
。我收到了这个错误：Update:我当前在控制台中的错误显示为“UncaughtTypeError:无法读取UncaughtTypeError:无法读取null的属性'document'。
哪一行？为什么不仅仅是document.getElementById（'myForm'）？
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();
  }

}