时间戳

首页 > 解决方案 > 提交表单后直接进入新页面

html - 提交表单后直接进入新页面

问题描述

目前，我开发了一个 Google Scripts API，用于人们将文件上传到共享的 Google Drive 文件夹。文件上传成功后，我希望他们被带到一个单独的“谢谢”页面，这样他们的上传就很明显了。目前，我在同一页面上只有一条关于此效果的消息，我无法弄清楚如何定向到我创建的新页面。

这是我从不同的问题中发现的额外的一点，可以尝试直接进入新页面，但是到目前为止这不起作用，因为它仍然在同一个上传表单页面上。我已将它包含在我的 code.gs 文件的底部。任何关于如何定向到只说“谢谢”或类似内容的自定义页面的想法都会很棒！

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  return template.evaluate();
}

我的其余代码如下：

代码.gs：

 function doGet() {
        return HtmlService.createHtmlOutputFromFile('form').setSandboxMode(
                HtmlService.SandboxMode.IFRAME);
    }

function createFolder(parentFolderId, folderName) {
    try {
        var parentFolder = DriveApp.getFolderById(parentFolderId);
        var folders = parentFolder.getFoldersByName(folderName);
        var folder;
        if (folders.hasNext()) {
            folder = folders.next();
        } else {
            folder = parentFolder.createFolder(folderName);
        }
        return {
            'folderId' : folder.getId()
        }
    } catch (e) {
        return {
            'error' : e.toString()
        }
    }
}

function uploadFile(base64Data, fileName, folderId) {
    try {
        var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0]
                .replace('data:', '');
        var byteCharacters = Utilities.base64Decode(splitBase[1]);
        var ss = Utilities.newBlob(byteCharacters, type);
        ss.setName(fileName);

        var folder = DriveApp.getFolderById(folderId);
        var files = folder.getFilesByName(fileName);
        var file;
        while (files.hasNext()) {
            // delete existing files with the same name.
            file = files.next();
            folder.removeFile(file);
        }
        file = folder.createFile(ss);
        return {
            'folderId' : folderId,
            'fileName' : file.getName()
        };
    } catch (e) {
        return {
            'error' : e.toString()
        };
    }
}

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  return template.evaluate();
}

表格.html：

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>


<body>

<div align="center">
  <p><img src="https://drive.google.com/uc?export=download&id=0B1jx5BFambfiWDk1N1hoQnR5MGNELWRIM0YwZGVZNzRXcWZR"
  height="140" width="400" ></p>
<div>

    <form id="uploaderForm">
        <label for="uploaderForm">  <b> Welcome to the Tesco's animal welfare and soy reporting system. </b> </label>
<BR>
<BR>


<div style="max-width:500px; word-wrap:break-word;">

Please add your contact information below and attach a copy of your company's animal welfare standard before clicking submit. Wait for the browser to confirm your submission and you may then close this page.

<BR>
<BR>

Thank you very much for your submission.

</div>

<BR>
<BR>
        <div>
            <input type="text" name="applicantName" id="applicantName"
                placeholder="Your Name">
        </div>

<BR>
        <div>
            <input type="text" name="applicantEmail" id="applicantEmail"
                placeholder="Your Company">
        </div>

<BR>
<BR>
        <div>
            <input type="file" name="filesToUpload" id="filesToUpload" multiple>
            <input type="button" value="Submit" onclick="uploadFiles()">
        </div>
    </form>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="output"></div>
    <script>
        var rootFolderId = '1-aYYuTczQzJpLQM3mEgOkWsibTak7KE_';
        var numUploads = {};
        numUploads.done = 0;
        numUploads.total = 0;
        // Upload the files into a folder in drive
        // This is set to send them all to one folder (specificed in the .gs file)
        function uploadFiles() {
            var allFiles = document.getElementById('filesToUpload').files;
            var applicantName = document.getElementById('applicantName').value;
            if (!applicantName) {
                window.alert('Missing applicant name!');
            }
            var applicantEmail = document.getElementById('applicantEmail').value;
            if (!applicantEmail) {
                window.alert('Missing applicant email!');
            }
            var folderName = applicantEmail;
            if (allFiles.length == 0) {
                window.alert('No file selected!');
            } else {
                numUploads.total = allFiles.length;
                google.script.run.withSuccessHandler(function(r) {
                    // send files after the folder is created...
                    for (var i = 0; i < allFiles.length; i++) {
                        // Send each file at a time
                        uploadFile(allFiles[i], r.folderId);
                    }
                }).createFolder(rootFolderId, folderName);
            }
        }
        function uploadFile(file, folderId) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var content = reader.result;
                document.getElementById('output').innerHTML = 'uploading '
                        + file.name + '...';
                //window.alert('uploading ' + file.name + '...');               
                google.script.run.withSuccessHandler(onFileUploaded)
                        .uploadFile(content, file.name, folderId);
            }
            reader.readAsDataURL(file);
        }
        function onFileUploaded(r) {
            numUploads.done++;
            document.getElementById('output').innerHTML = 'uploaded '
                    + r.fileName + ' (' + numUploads.done + '/'
                    + numUploads.total + ' files).';
            if (numUploads.done == numUploads.total) {
                document.getElementById('output').innerHTML = 'All of the '
                        + numUploads.total + ' files are uploaded';
                numUploads.done = 0;
            }
        }
    </script>

        <label for="uploaderForm"> 

Powered by 3Keel 
</label>
</body>


</html>

谢谢.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Thank you for submitting!
  </body>
</html>

编辑：

我已按照建议更改了此功能：

        if (numUploads.done == numUploads.total) {
            window.location = 'Thanks.html';
            numUploads.done = 0;

现在它正在重定向到另一个页面，但我遇到了这个错误：

  1. 那是一个错误。

在此服务器上找不到请求的 URL。我们知道的就这些。

标签： htmlgoogle-apps-script

解决方案

如果您正在寻找问题的解决方案，那么这个答案怎么样？

  • 您想Thanks.html在进程Form.html完成时打开。
  • Form.html并Thanks.html放在一个项目中。

如果我的理解是正确的，这个解决方法怎么样？我曾经经历过你的情况。当时，我可以通过此解决方法解决此问题。

修改点：

  • 不需要用于doPost()访问Thanks.html. 我认为您可以使用doGet().
  • 我认为@Scott Craig 的回答也可以用于这种情况。在我的解决方法中，修改了的 URL window.location = 'Thanks.html';。
    • 使用已部署 Web 应用程序的 URL。在您的脚本中，当用户访问您的表单时，他们会访问已部署的 Web 应用程序的 URL。在此解决方法中，通过添加查询参数来使用它。

修改后的脚本：

表单.html

对于在您的问题中添加为“EDIT”的脚本，请进行如下修改。

从： 
window.location = 'Thanks.html';
至： 
window.location = 'https://script.google.com/macros/s/#####/exec?toThanks=true';

https://script.google.com/macros/s/#####/exec是部署的 Web 应用的 URL。请添加一个查询参数，如toThanks=true. 这是一个示例查询参数。

代码.gs

请doGet()进行如下修改。

从： 
function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
至： 
function doGet(e) {
  if (e.parameter.toThanks) {
    return HtmlService.createHtmlOutputFromFile('Thanks')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  } else {
    return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
}

笔记：

  • 当已部署的 Web Apps 的脚本被修改时，请将其重新部署为新版本。这样，最新的脚本就会反映到 Web 应用程序中。
  • 修改后的脚本流程如下。
    • 用户访问时Form.html，由于toThanks=true未使用查询参数，Form.html返回。
    • 当onFileUploaded()运行且if (numUploads.done == numUploads.total) {}为真时，它会打开带有查询参数的 Web 应用程序 URL toThanks=true。由此，if (e.parameter.toThanks) {}ofdoGet()为真，Thanks.html返回并打开它。

在我的环境中，我可以确认这个修改后的脚本有效。但是，如果这在您的环境中不起作用，我很抱歉。那个时候，我就想考虑一下这个问题。

推荐阅读