Html 提交表单后直接转到新页面_Html_Google Apps Script

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

html google-apps-script

Html 提交表单后直接转到新页面,html,google-apps-script,Html,Google Apps Script,目前我已经开发了一个GoogleScriptsAPI，用于人们将文件上传到共享的GoogleDrive文件夹。文件上传成功后，我希望他们被带到一个单独的“谢谢”页面，这样很明显他们的上传工作正常。目前我在同一个页面上只有一条这样的消息，我不知道如何指向我创建的新页面这是我从不同的问题中发现的额外一点，可以尝试直接转到新页面，但是这到目前为止还不起作用，因为它仍然在同一个上传表单页面上。我已将其包含在code.gs文件的底部。任何关于如何直接指向只说“谢谢”或类似内容的自定义页面的想法都将非常好

目前我已经开发了一个GoogleScriptsAPI，用于人们将文件上传到共享的GoogleDrive文件夹。文件上传成功后，我希望他们被带到一个单独的“谢谢”页面，这样很明显他们的上传工作正常。目前我在同一个页面上只有一条这样的消息，我不知道如何指向我创建的新页面

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

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

我的代码的其余部分如下：

代码G.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：

<!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>

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

那是个错误

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

我可能误解了你的问题，但根据我的理解，不是这句话：

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

您想重定向到Thanke.html。如果正确，只需将上述行替换为：

window.location = 'Thanks.html';

我可能误解了你的问题，但根据我的理解，不是这句话：

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

您想重定向到Thanke.html。如果正确，只需将上述行替换为：

window.location = 'Thanks.html';

如果您正在寻找问题的解决方案，这个答案如何

当
```
Form.html
```
的过程完成时，您想打开
```
Thank.html
```
```
Form.html
```
和
```
谢谢.html
```
被放在一个项目中

如果我的理解是正确的，那么这个变通方法怎么样？我从未经历过你的处境。当时，我可以通过这个变通方法解决这个问题

修改点：

无需使用
```
doPost（）
```
即可访问
```
谢谢.html
```
。我认为使用
```
doGet（）
```
可以实现您想要的

我认为这也适用于这种情况。在我的解决方法中，

window.location='thanky.html'的URL已修改。

使用已部署Web应用的URL。在脚本中，当用户访问表单时，他们将访问已部署Web应用的URL。在此解决方法中，通过添加查询参数来使用它


修改的脚本：
Form.html
对于在您的问题中添加为“编辑”的脚本，请修改如下
发件人：
致：
https://script.google.com/macros/s/#####/exec
是部署的Web应用程序的URL。请添加一个查询参数，如toThanks=true
。这是一个示例查询参数
代码.gs
请修改doGet（）
，如下所示
发件人：
致：
注:

修改已部署Web应用的脚本时，请将其重新部署为新版本。这样，最新的脚本将反映到Web应用程序中。
此修改脚本的流程如下所示。

当用户访问Form.html
时，由于未使用toThanks=true
的查询参数，因此返回Form.html
当运行onFileUploaded（）
并且如果（numUploads.done==numUploads.total）{}
为true，它将打开Web应用程序URL，查询参数为toThanks=true
。这样，doGet（）
的if（e.parameter.toThanks）{}
为true，返回并打开thanking.html


在我的环境中，我可以确认这个修改过的脚本工作正常。但如果这在你的环境中不起作用，我很抱歉。那时，我想考虑一下这个问题。
如果您正在寻找问题的解决方案，这个答案如何

当Form.html
的过程完成时，您想打开Thank.html
Form.html
和谢谢.html
被放在一个项目中

如果我的理解是正确的，那么这个变通方法怎么样？我从未经历过你的处境。当时，我可以通过这个变通方法解决这个问题
修改点：

无需使用doPost（）
即可访问谢谢.html
。我认为使用doGet（）
可以实现您想要的
我认为这也适用于这种情况。在我的解决方法中，window.location='thanky.html'的URL已修改。

使用已部署Web应用的URL。在脚本中，当用户访问表单时，他们将访问已部署Web应用的URL。在此解决方法中，通过添加查询参数来使用它


修改的脚本：
Form.html
对于在您的问题中添加为“编辑”的脚本，请修改如下
发件人：
致：
https://script.google.com/macros/s/#####/exec
是部署的Web应用程序的URL。请添加一个查询参数，如toThanks=true
。这是一个示例查询参数
代码.gs
请修改doGet（）
，如下所示
发件人：
致：
注:

修改已部署Web应用的脚本时，请将其重新部署为新版本。这样，最新的脚本将反映到Web应用程序中。
此修改脚本的流程如下所示。

当用户访问Form.html
时，由于未使用toThanks=true
的查询参数，因此返回Form.html
当运行onFileUploaded（）
并且如果（numUploads.done==numUploads.total）{}
为true，它将打开Web应用程序URL，查询参数为toThanks=true
。这样，doGet（）
的if（e.parameter.toThanks）{}
为true，返回并打开thanking.html


在我的环境中，我可以合作
window.location = 'Thanks.html';

window.location = 'https://script.google.com/macros/s/#####/exec?toThanks=true';

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