Fatal编程技术网
  • javascript/
  • 结合google.script.run和javascript函数

结合google.script.run和javascript函数

javascript html google-apps-script web-applications google-drive-api

结合google.script.run和javascript函数,javascript,html,google-apps-script,web-applications,google-drive-api,Javascript,Html,Google Apps Script,Web Applications,Google Drive Api,我正在构建一个定制的“谷歌表单”——带有文件上传功能的表单。 表单使用自定义的“谢谢”页面（参见第1行：iframe）。 我发现了一个需要在谷歌脚本环境中运行的文件上传脚本，它会将文件上传到我的谷歌硬盘 现在我需要将这个上传脚本与我的自定义谷歌表单结合起来。 但我不知道如何做到这一点，因为有一些操作需要结合起来，文件上传必须先完成，然后才能进入“谢谢”页面 我尝试将其组合起来，如下面的代码所示 表格： <iframe name="hidden_iframe" id="hidden_ifr

我正在构建一个定制的“谷歌表单”——带有文件上传功能的表单。 表单使用自定义的“谢谢”页面（参见第1行：iframe）。
我发现了一个需要在谷歌脚本环境中运行的文件上传脚本，它会将文件上传到我的谷歌硬盘

现在我需要将这个上传脚本与我的自定义谷歌表单结合起来。 但我不知道如何做到这一点，因为有一些操作需要结合起来，文件上传必须先完成，然后才能进入“谢谢”页面

我尝试将其组合起来，如下面的代码所示

表格：

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted)  { picUploadJs(myForm); }"></iframe>

<form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
     <input placeholder="1234" name="entry.1234" id="user" type="text">
     <label for="user">User:</label>

     <input name="picToLoad" type="file" />

     <div id="status" style="display: none">
       Uploading. Please wait...
     </div

   <button type="submit" name="action">Send</button>
</form>
  • 当您单击“发送”按钮时，
    • 谷歌表单很好用
    • document.getElementById（'status'）.style.display='inline'
    • 谷歌应用程序脚本中的
      processForm（frmData）
      功能不起作用
    • Javascript上的
      updateOutput（）
      函数不起作用
如果我的理解是正确的，这次修改怎么样？请把这看作是几个答案中的一个

修改点：
  • 在这次修改中，文件是使用
    onclick
    事件检索的，而提交到Google表单的脚本没有修改
  • 检索到的文件将转换为base64并发送到Google Apps脚本
修改脚本： HTML: 注:
  • 选择文件并单击“发送”按钮后，该文件将发送到Google Apps脚本，并在Google Drive上创建为文件，同时提交Google表单。然后运行Javascript端的
    updateOutput（）
  • 在这个修改后的脚本中，使用blob。所以上传文件的最大大小是50MB。请小心这个
编辑1： 在您的评论中，发现
当我从提交按钮中删除id=sampleId时，Google表单数据被正确提交。使用此选项，请测试以下修改

在此修改中，删除了
id=“sampleId”
，并使用元素名称触发事件

HTML:
编辑2：
我更新了HTML和Javascript。请确认一下。谷歌应用程序脚本未被修改

HTML:


用户：
上传。请稍候。。。
发送


Javascript:


//此功能已修改。
函数picUploadJs（myForm）{
var file=document.getElementById（“sampleFile”）.files[0]；
const f=新文件读取器（）；
f、 onload=（e）=>{
const data=e.target.result.split（“，”）；
const obj={fileName:file.name，mimeType:data[0]。匹配（/：（\w.+）；/）[1]，数据：data[1]}；
document.getElementById（'status'）.style.display='inline'；
google.script.run.withSuccessHandler（updateOutput.processForm（obj）；
}
f、 readAsDataURL（文件）；
}
函数updateOutput（）{
var outputDiv=document.getElementById（'status'）；
outputDiv.innerHTML=“文件已上载！”；
窗口位置https://thankyoupage/';
}

我可以问一下谷歌应用程序脚本的
processForm（）
吗？我已经在我的原始帖子中添加了谷歌脚本代码。谢谢你的回复。在修改您的脚本之前，我想确认您当前的情况。在您当前的情况下，当单击“发送”按钮时，Google表单将被提交，
picUploadJs（）
将被运行，并且文件将在Google Drive上创建？当点击“发送”按钮时，请告诉我您当前的情况。当点击“发送”按钮时：谷歌表单已提交，
picUploadJs（）
运行，但仅部分运行：元素“status”将样式更改为
inline
，但上载功能
Google.script.run
似乎无法启动或正确运行。感谢您的回复。我想我能理解你的处境。所以我提出了一个修改后的脚本作为答案。你能确认一下吗？我不确定你的整个剧本。在我的环境中，我可以确认上面修改的脚本工作正常。但是，如果脚本在您的环境中不起作用，我很抱歉。谢谢您花时间为我解决这一切！我已经用您的更改修改了我的脚本，但不幸的是，它现在没有提交Google表单数据。不过，它会将一个文件上传到谷歌硬盘，并重定向到感谢页面。当我从submit按钮中删除
id=sampleId
时，Google表单数据被正确提交（当然上传功能不再工作）。您可能忘记了iframe代码吗？因为我的原始代码中也使用了这一行：
我目前正试图让它像这样工作，但尚未成功<编码>
并将脚本放入函数：
函数上载（）{//your script}抱歉，但它仍然没有发送表单数据。我认为文件上传脚本获得了“更高的优先级”（或者更快？），并且跳过了
标记中的操作函数。@Bldjef感谢您的回复和测试。给您带来不便，我深表歉意。因此，我想确认情况并修改它。如果你能给我一个时间，我很高兴。@Bldjef我为给你带来的不便道歉。我更新了我的答案。你能确认一下吗？在此修改中，再次使用了
…
。通过这一点，我可以确认两个提交都可以完成。如果这不起作用，我道歉。

<script>

  function picUploadJs(frmData) {

    document.getElementById('status').style.display = 'inline';

    google.script.run
      .withSuccessHandler(updateOutput)
      .processForm(frmData)
    };

  function updateOutput() {

    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }

</script>



function doGet(e) {
  return HtmlService.createTemplateFromFile('test')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setTitle('Name To Appear in Browser Tab')
    //.setSandboxMode();//Defaults to IFRAME which is now the only mode available
}

function processForm(theForm) {
  var fileBlob = theForm.picToLoad;

  Logger.log("fileBlob Name: " + fileBlob.getName())
  Logger.log("fileBlob type: " + fileBlob.getContentType())
  Logger.log('fileBlob: ' + fileBlob);

  var fldrSssn = DriveApp.getFolderById('xxxx');
    fldrSssn.createFile(fileBlob);

  return true;
}




<form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
  <input placeholder="1234" name="entry.1234" id="user" type="text">
  <label for="user">User:</label>
  <input name="picToLoad" type="file" id="sampleFile" /> <!-- Modified -->
  <div id="status" style="display: none">
  Uploading. Please wait...
  </div>
  <button type="submit" name="action" id="sampleId" >Send</button> <!-- Modified -->
</form>



<script>
  // Below script was added.
  document.getElementById("sampleId").onclick = function(e) {
    e.stopPropagation();
    e.preventDefault();
    var file = document.getElementById("sampleFile").files[0];
    const f = new FileReader();
    f.onload = (e) => {
      const data = e.target.result.split(",");
      const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
      picUploadJs(obj);
    }
    f.readAsDataURL(file);
  };

  function picUploadJs(frmData) {
    document.getElementById('status').style.display = 'inline';
    google.script.run.withSuccessHandler(updateOutput).processForm(frmData)
  };

  function updateOutput() {
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }
</script>



function processForm(theForm) {
  var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
  var fldrSssn = DriveApp.getFolderById('xxxx');
  fldrSssn.createFile(fileBlob);
  return true;
}



<form id="myForm" target="hidden_iframe" onsubmit="submitted=true;">
  <input placeholder="1234" name="entry.1234" id="user" type="text">
  <label for="user">User:</label>
  <input name="picToLoad" type="file" id="sampleFile" />
  <div id="status" style="display: none">
  Uploading. Please wait...
  </div>
  <button type="submit" name="action">Send</button> <!-- Modified -->
</form>



var button = document.getElementsByName('action')[0]; // Modified
button.onclick = function(e) { // Modified
  e.stopPropagation();
  e.preventDefault();
  var file = document.getElementById("sampleFile").files[0];
  const f = new FileReader();
  f.onload = (e) => {
    const data = e.target.result.split(",");
    const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
    picUploadJs(obj);
  }
  f.readAsDataURL(file);
};



<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted)  { picUploadJs(myForm); }"></iframe>
<form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
  <input placeholder="1234" name="entry.1234" id="user" type="text">
  <label for="user">User:</label>
  <input name="picToLoad" type="file" id="sampleFile" /> <!-- Modified -->
  <div id="status" style="display: none">
  Uploading. Please wait...
  </div>
  <button type="submit" name="action">Send</button>
</form>



<script>
  // This function was modified.
  function picUploadJs(myForm) {
    var file = document.getElementById("sampleFile").files[0];
    const f = new FileReader();
    f.onload = (e) => {
      const data = e.target.result.split(",");
      const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
      document.getElementById('status').style.display = 'inline';
      google.script.run.withSuccessHandler(updateOutput).processForm(obj);
    }
    f.readAsDataURL(file);
  }

  function updateOutput() {
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }
</script>