Html 使用 htmlService 和应用程序脚本上传表单和文件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20769149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form and file upload with htmlService and app script not working
提问by ryano
I'm trying to upload a file to a specific google drive folder along with form data into a spreadsheet. The spreadsheet portion of this code works, but the file upload function does not. Any help on fixing this would be appreciated.
我正在尝试将文件与表单数据一起上传到特定的谷歌驱动器文件夹到电子表格中。此代码的电子表格部分有效，但文件上传功能无效。任何解决此问题的帮助将不胜感激。
Code.gs
代码.gs
var submissionSSKey = 'SS ID';
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function doPost(e) {
var template = HtmlService.createTemplateFromFile('Thanks.html');
var LoanType = template.name = e.parameter.name;
var borrower = template.department = e.parameter.department;
var amount = template.message = e.parameter.message;
var emailed = template.email = e.parameter.email;
var comp = 'N/A'
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 5).setValues([[comp,LoanType,borrower,amount,emailed]]);
var fileBlob = e.paramater.thefile
var doc = DriveApp.getFolderById('folder ID');
doc.createFile(fileBlob)//.rename('New Name');
return template.evaluate();
}
Form.html
表单.html
<html>
<head>
<title></title>
</head>
<body>
<form action="<?= action ?>" enctype="multipart/form-data" method="post">
<table border="0" cellpadding="1" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td>
Name:</td>
<td>
<input name="name" type="text" /></td>
</tr>
<tr>
<td>
Department:</td>
<td>
<select name="department">
<option>Select Option</option>
<option>Cashier</option>
<option>Greeter</option>
<option>Runner</option>
<option>Line Control</option>
<option>IDB</option>
<option>Unknown</option>
</select></td>
</tr>
<tr>
<td>
Email:</td>
<td>
<input name="email" type="text" /></td>
</tr>
<tr>
<td>
Message:</td>
<td>
<textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea></td>
</tr>
<tr>
<td>
<p>
School Schedule (Image Files Only):</p>
</td>
<td>
<p>
<input type="file" id="thefile" name="thefile">
</p></td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" /></td>
<td>
You will receive an email confirmation upon submission</td>
</tr>
</tbody>
</table>
</form></body>
</html>
Thanks.html
谢谢.html
<html>
<body>
<h1>Thanks</h1>
<p>Thank you for your submission.</p>
Name: <?= name ?><br/>
Department: <?= department ?><br/>
Message: <?= message ?><br/>
Email: <?= email ?><br/>
</body>
</html>
回答by Mogsdad
Edit:Working example
编辑：工作示例
The HtmlService does not support the postmethod for HTML forms. The input elements collected by a form can be communicated to a server-side function using a handler function instead. For more details, see HTML Service: Communicate with Server Functions.
HtmlService 不支持postHTML 表单的方法。表单收集的输入元素可以改为使用处理程序函数传递给服务器端函数。有关更多详细信息，请参阅HTML 服务：与服务器功能通信。
Here's an example based on the code you've posted in your question.
这是基于您在问题中发布的代码的示例。
Form.html
表单.html
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
Name: <input name="name" type="text" /><br/>
Department: <select name="department">
<option>Select Option</option>
<option>Cashier</option>
<option>Greeter</option>
<option>Runner</option>
<option>Line Control</option>
<option>IDB</option>
<option>Unknown</option>
</select><br/>
Email: <input name="email" type="text" /><br/>
Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/>
School Schedule (Image Files Only): <input name="myFile" type="file" /><br/>
<input type="button" value="Submit"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
Thanks.html
谢谢.html
<div>
<h1>Thanks</h1>
<p>Thank you for your submission.</p>
Name: <?= name ?><br/>
Department: <?= department ?><br/>
Message: <?= message ?><br/>
Email: <?= email ?><br/>
File URL: <?= fileUrl ?><br/>
</div>
Code.gs
代码.gs
var submissionSSKey = '--Spreadsheet-key--';
var folderId = "--Folder-Id--";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var department = template.department = theForm.department;
var message = template.message = theForm.message;
var email = template.email = theForm.email;
var fileUrl = template.fileUrl = doc.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 5).setValues([[name,department,message,email,fileUrl]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Original answer, which was focused on basic debugging:
原始答案，重点是基本调试：
Where does this code come from originally? There have been multiple questions about it, and it might be helpful to see the original tutorial or example it was taken from.
这段代码最初来自哪里？有很多关于它的问题，查看它的原始教程或示例可能会有所帮助。
When you run this code as a published web app, and submit a file, the error you receive is TypeError: Cannot read property "thefile" from undefined.Without any more digging, this tells you that there's an undefinedobject being used in your code. What object is that? Don't know yet, but a clue is that the code is looking for a property named "thefile".
当您将此代码作为已发布的 Web 应用程序运行并提交文件时，您收到的错误是TypeError: Cannot read property "thefile" from undefined.“不再挖掘”，这表明undefined您的代码中正在使用一个对象。那是什么物体？还不知道，但一个线索是代码正在寻找一个名为 的属性"thefile"。
If you have the script open in the editor, and launched the webapp from there (by clicking on Test web app for your latest codein the Publish / Deploy as Web App dialog), then you can also check the Execution Transcript for more details. (under View menu) You'll find it contains something like this:
如果您在编辑器中打开了脚本，并从那里启动了 web 应用程序（通过Test web app for your latest code在“发布/部署为 Web 应用程序”对话框中单击），那么您还可以查看执行脚本以获取更多详细信息。（在“查看”菜单下）您会发现它包含如下内容：
[13-12-25 07:49:12:447 EST] Starting execution
[13-12-25 07:49:12:467 EST] HtmlService.createTemplateFromFile([Thanks.html]) [0 seconds]
[13-12-25 07:49:12:556 EST] SpreadsheetApp.openById([--SSID--]) [0.089 seconds]
[13-12-25 07:49:12:557 EST] Spreadsheet.getSheets() [0 seconds]
[13-12-25 07:49:12:626 EST] Sheet.getLastRow() [0.067 seconds]
[13-12-25 07:49:12:627 EST] Sheet.getRange([1, 1, 1, 5]) [0 seconds]
[13-12-25 07:49:12:629 EST] Range.setValues([[[N/A, , Select Option, , ]]]) [0.001 seconds]
[13-12-25 07:49:12:983 EST] Execution failed: TypeError: Cannot read property "thefile" from undefined. (line 20, file "Code") [0.17 seconds total runtime]
We see that same error, but now we know the line number. That line contains a spelling mistake:
我们看到了同样的错误，但现在我们知道了行号。该行包含一个拼写错误：
var fileBlob = e.paramater.thefile
^^^^^^^^^
