提交表单后直接转到新页面

Question

Currently I've developed a Google Scripts API which is used for people to upload files to a shared Google Drive folder. 目前，我已经开发了一个Google Scripts API，供人们将文件上传到共享的Google云端硬盘文件夹中。 After the file are uploaded successfully, I want them to be taken to a separate "Thank you" page so it is clear their upload has worked. 成功上传文件后，我希望将他们带到单独的“谢谢”页面，以便清楚他们的上传已成功。 Currently I only have a message on the same page to this effect and I cannot figure out how to direct to a new page that I have created. 目前，我在同一页面上只有一条消息可以达到此目的，并且我无法弄清楚如何定向到我创建的新页面。

This is the additional bit I found from different questions to try direct to a new page however this is not working so far, as it remains on the same upload form page. 这是我从其他问题中发现的其他内容，可尝试直接进入新页面，但是到目前为止，该功能仍无法正常工作，因为它仍保留在同一上传表单页面上。 I have included it at the bottom of my code.gs file. 我已将其包含在我的code.gs文件的底部。 Any ideas on how to direct to a custom page that just says "thank you" or something similar would be great! 关于如何直接指向自定义页面的任何想法，只要说“谢谢”或类似内容，都很棒！

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

The rest of my code is as follows: 我的其余代码如下：

Code.gs: 代码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();
}

Form.html: Form.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>

Thanks.html: Thanks.html：

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

EDIT: 编辑：

I have changed this function as recommended: 我已根据建议更改了此功能：

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

Now it is redirecting to another page but I am faced with this error: 现在它重定向到另一个页面，但是我遇到了这个错误：

That's an error. 那是一个错误。

The requested URL was not found on this server. 在此服务器上找不到请求的URL。 That's all we know. 我们知道的就这些。

Answer 1

If you are looking for the solution of your issue yet, how about this answer? 如果您正在寻找问题的解决方案，该答案如何？

You want to open Thanks.html when the process at Form.html is finished. 要打开Thanks.html当在过程Form.html完成。
Form.html and Thanks.html are put in a project. Form.html和Thanks.html放在一个项目中。

If my understanding is correct, how about this workaround? 如果我的理解是正确的，该解决方法如何？ I have ever experienced with your situation. 我经历过你的情况。 At that time, I could resolve this issue by this workaround. 那时，我可以通过此替代方法解决此问题。

Modification points: 修改要点：

It is not required to use doPost() to access to Thanks.html . 不需要使用doPost()来访问Thanks.html 。 I think that you can achieve what you want using doGet() . 我认为您可以使用doGet() 。
I think that @Scott Craig's answer can be also used for this situation. 我认为@Scott Craig的答案也可以用于这种情况。 In my workaround, the URL of window.location = 'Thanks.html'; 在我的解决方法中， window.location = 'Thanks.html';的URL window.location = 'Thanks.html'; is modified. 被修改。
- Uses the URL of deployed Web Apps. 使用已部署的Web Apps的URL。 In your script, when users access to your form, they access to the URL of the deployed Web Apps. 在您的脚本中，当用户访问您的表单时，他们将访问已部署的Web Apps的URL。 In this workaround, it is used by adding a query parameter. 在这种解决方法中，通过添加查询参数来使用它。

Modified scripts: 修改后的脚本：

Form.html Form.html

For the script added in your question as "EDIT", please modify as follows. 对于在问题中添加为“ EDIT”的脚本，请进行以下修改。

From: 从：

 window.location = 'Thanks.html';

To: 至：

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

https://script.google.com/macros/s/#####/exec is the URL of the the deployed Web Apps. https://script.google.com/macros/s/#####/exec是已部署的Web应用程序的URL。 Please add a query parameter like toThanks=true . 请添加一个查询参数，如toThanks=true 。 This is a sample query parameter. 这是一个示例查询参数。

Code.gs 代码

Please modify doGet() as follows. 请如下修改doGet() 。

From: 从：

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

To: 至：

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

Note: 注意：

When the script of the deployed Web Apps was modified, please redeploy it as new version. 修改已部署的Web Apps的脚本后，请重新部署它为新版本。 By this, the latest script is reflected to Web Apps. 这样，最新脚本将反映到Web Apps。
The flow of this modified script is as follows. 此修改后的脚本的流程如下。
- When users access to the Form.html , because the query parameter of toThanks=true is not used, Form.html is returned. 当用户访问Form.html ，因为未使用toThanks=true的查询参数， Form.html将返回Form.html 。
- When onFileUploaded() is run and if (numUploads.done == numUploads.total) {} is true, it opens the Web Apps URL with the query parameter of toThanks=true . 当onFileUploaded()运行并且if (numUploads.done == numUploads.total) {}为true时，它将使用查询参数toThanks=true打开Web Apps URL。 By this, if (e.parameter.toThanks) {} of doGet() is true, and Thanks.html is returned and opened it. 这样， if (e.parameter.toThanks) {} doGet() if (e.parameter.toThanks) {}为true，则返回Thanks.html并将其打开。

In my environment, I could confirm that this modified script worked. 在我的环境中，我可以确认此修改后的脚本有效。 But if this didn't work in your environment, I'm sorry. 但是，如果这在您的环境中不起作用，对不起。 At that time, I would like to think of about the issue. 当时，我想考虑一下这个问题。

Answer 2

I might be misunderstanding your question, but from what I understand, instead of this line: 我可能会误解您的问题，但根据我的理解，而不是以下内容：

document.getElementById('output').innerHTML = 'All of the '
                    + numUploads.total + ' files are uploaded';

You want to redirect to Thanks.html. 您想要重定向到thank.html。 If that's correct, just replace the above line with: 如果正确，则将上面的行替换为：

window.location = 'Thanks.html';

提交表单后直接转到新页面

问题描述

2 个解决方案

解决方案1
2 2018-09-12 23:35:09

Modification points: 修改要点：

Modified scripts: 修改后的脚本：

Form.html Form.html

Code.gs 代码

Note: 注意：

解决方案2
0 2018-09-11 15:34:56

提交表单后直接转到新页面

问题描述

2 个解决方案

解决方案1 2 2018-09-12 23:35:09

Modification points: 修改要点：

Modified scripts: 修改后的脚本：

Form.html Form.html

Code.gs 代码

Note: 注意：

解决方案2 0 2018-09-11 15:34:56

解决方案1
2 2018-09-12 23:35:09

解决方案2
0 2018-09-11 15:34:56