javascript - 提交一份表单,将多个文件上传到一个文件夹中
问题描述
我创建了一个自定义 Google 表单,它允许登录的 Google 用户在表单中包含多个文件。这些文件将上传到 Google Drive 中新创建的文件夹中。Google Script 使用当前用户的电子邮件地址 + 当前日期和时间作为文件夹名称。
问题和预期结果:
由于该forEach
功能,脚本将每个文件上传到一个单独的文件夹(同名)。我想将一份表单提交的每个文件上传到一个文件夹中。
HTML:
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) { picUploadJs(myForm); }"></iframe>
<form id="myForm" class="col s12" 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" />
<div id="status" style="display: none">
Uploading. Please wait...
</div>
<button type="submit" name="action">Send</button> <!-- Modified -->
</form>
Javascript:
function picUploadJs(myForm) {
const f = document.getElementById("files");
[...f.files].forEach((file, i) => {
const fr = new FileReader();
fr.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);
}
fr.readAsDataURL(file);
});
}
function updateOutput() {
var outputDiv = document.getElementById('status');
outputDiv.innerHTML = "The File was UPLOADED!";
window.location='https://Thankyou';
}
谷歌脚本:
function doGet(e) {
Logger.log("doGet done");
return HtmlService.createTemplateFromFile('test')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setTitle('Form')
//.setSandboxMode();//Defaults to IFRAME which is now the only mode available
}
function processForm(theForm) {
var dateTime = Utilities.formatDate(new Date(), "GMT+2", "dd-MM-yy_HH-mm");
var email = Session.getActiveUser().getEmail();
var parentFolder=DriveApp.getFolderById('xxxxx');
var newFolder=parentFolder.createFolder(email + "_" + dateTime);
var newFolderId = DriveApp.getFoldersByName(newFolder).next().getId();
var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
var fldrSssn = DriveApp.getFolderById(newFolderId);
fldrSssn.createFile(fileBlob);
return true;
}
解决方案
- 提交文件时,您希望每次提交都创建一个新文件夹。
- 您想将多个文件上传到创建的文件夹。
如果我的理解是正确的,那么这个修改呢?请认为这只是几个答案之一。
修改后的脚本:
HTML:
请进行如下修改。
从:<input name="picToLoad" type="file" id="sampleFile" />
到:
<input name="picToLoad" type="file" id="files" multiple />
Javascript:
请修改picUploadJs()
.
function picUploadJs(myForm) {
const f = document.getElementById("files");
google.script.run.withSuccessHandler((folderId) => { // Added
var files = [...f.files];
files.forEach((file, i) => {
const fr = new FileReader();
fr.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(() => {
if (i == files.length - 1) updateOutput();
}).processForm(obj, folderId); // Modified
}
fr.readAsDataURL(file);
});
}).createFolder();
}
谷歌应用脚本:
我分开processForm()
到processForm()
和createFolder()
。
// Added
function createFolder() {
var dateTime = Utilities.formatDate(new Date(), "GMT+2", "dd-MM-yy_HH-mm");
var email = Session.getActiveUser().getEmail();
var parentFolder = DriveApp.getFolderById('xxxxx');
var newFolder = parentFolder.createFolder(email + "_" + dateTime);
var newFolderId = DriveApp.getFoldersByName(newFolder).next().getId();
return newFolderId;
}
// Modified
function processForm(theForm, newFolderId) {
var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
var fldrSssn = DriveApp.getFolderById(newFolderId);
fldrSssn.createFile(fileBlob);
return true;
}
笔记:
在您的 HTML 中,第一行如下所示。
<form id="myForm" target="hidden_iframe" onsubmit="submitted=true;">
从您之前的问题中,如果您使用以下几行,请更新您的问题。我以为您正在使用以下脚本。
<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;">
如果这不是你想要的结果,我很抱歉。
推荐阅读
- postgresql - Postgres 中的存储过程实现而不是硬编码查询
- c++ - std::move 不为右值引用移动
- android - 如何在颤动中向小部件树层次结构中的更高类发送“按钮被按下信号”?
- python - Databricks JDBC 连接有效,但查询失败
- php - symfony 断言使用 if/else 语句验证原始数据
- sql - 我怎样才能每天只获得一个 SQL 查询?
- azure-ad-b2c - 无法让 Azure AD B2C 发出令牌并将其重定向到 https://jwt.ms
- javascript - Firebase 列出所有用户
- vue.js - 在本地机器上加载 Vue 应用程序时出现问题,没有得到所需的结果
- python - 如何在文本文件中附加打印的脚本?