[英]HTML5 form validation and file upload in Google Apps Script HTML Service
我正在使用 HTML 服务开发 GAS,但现在遇到了障碍。 我想做的是
这是我的(几乎)工作代码:
代码.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index.html');
}
function uploadFiles(form) {
try {
var ssID = '-------ssID-------';
var dropboxID = '-------DriveID-------';
var folder = DocsList.getFolderById(dropboxID);
var blob = form.myFile;
if ( Boolean(blob) ) {
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + form.myName);
}
var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 3).setValues([[ form.myName, form.myMail, file.getUrl() ]]);
return "File uploaded successfully"+ file.getUrl() + file.getName();
} catch (error) {
return error.name + ' on line: ' + error.lineNumber + ' -> ' + error.message;
}
}
索引.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- You can also include your own CSS styles -->
<style>
form { margin: 40px auto; }
input { display:block; margin: 20px; }
</style>
<!-- This is the actual HTML form -->
<!--form id="myForm" onsubmit="runGAS(this)"-->
<form id="myForm" onsubmit="return google.script.run
.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);">
<!-- Text input fields -->
<input type="text" name="myName" id="myName" placeholder="Your name.." required />
<input type="email" name="myMail" id="myMail" placeholder="Your mail.." required />
<!-- File input filed -->
<input type="file" name="myFile" id="myFile" required />
<!-- The submit button. It calls the server side function uploadfiles() on click -->
<input type="submit" value="run onClick"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
<input type="submit" value="Run GAS Function">
</form>
<script>
function runGAS( argThis ) {
var n = $( "#myName" ).val();
var f = document.getElementById("myFile");
// var g = $( "myFile" ).val();
if( Boolean(n) ) {
document.getElementById('output').innerHTML = "OK" + n + "js: " + f;
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles( argThis );
document.getElementById('output').innerHTML = e.name + 'on line:' + e.lineNumber + '->' + e.message;
}
return false;
}
</script>
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>
<!-- The function will be called after the Google Script has executed -->
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
我遇到了很多建议:
form
元素,这样做有助于触发HTML5验证,但奇怪的事情发生在 GAS 上,因为它不会,并且 URL 生成带有表单值的典型GET
(例如, https://script.google.com/a/macros/----/s/---------/dev?myName=va&myMail=vas%40au.edu&myFile=imgName.jpg
)任何解决方案将不胜感激。
编辑 12/19/2014
<script>
window.runGAS = function() {
// jQuery Style
window.form = $( "#myForm" );
// OR JS
window.form = document.getElementById('myForm');
google.script.run
.withSuccessHandler(fileUploaded)
.uploadFiles(form);
return false;
}
</script>
我尝试了 Sandy 的建议,在表单元素的函数调用onsubmit
中省略传递值。 这有助于触发 HTML5 验证。 我想我必须找到将表单对象(而不是单个表单值)传递给code.gs
,所以我通过 GAS 函数运行传递表单对象。
如果我使用 jQuery 样式,JavaScript 控制台会报告Untaming of guest constructed objects unsupported: [object Object]
。
如果我使用getElementById
,我会遇到同样的问题,它生成带有一对 name=value 的 GET 样式 URL 并返回 index.html 而不“执行” code.gs
函数。 请注意,它“似乎”以某种方式通过code.gs
(即,如果我放置了一些语法错误,它会在此过程中报告)但它只是没有像onclick
那样做它应该做的事情。
到目前为止,这将起作用的唯一方法是使用onclick
,而不是onsubmit
,而不是从标签调用中间 GAS。 但它绕过了 HTML5 验证。
我真的不知道这里...
以下是我使用 HTML 服务配置 FORM 的方法:
<form id="myInputForm" name="input" onsubmit="writeInput()">
我没有在表单中运行onsubmit="return google.script.run
。我想我遇到了与您相同或类似的问题。因此,表单在提交表单时运行 JavaScript 函数writeInput()
. 然后 SCRIPT 标签中的 JavaScript 函数运行google.script.run
。这对我google.script.run
。当我这样设置时,具有必填设置的输入字段将阻止提交表单。
<script>
window.writeInput = function() {
window.myInputValue = document.getElementById('idMyInputID').value; //Get input value
google.script.run
}
<script>
你应该对前端和后端两种数据验证。 黑客也许能够找到某种方式将他们自己的数据发送到.gs
,即服务器端代码。 如果我选择在前面,客户端,或后端,服务器端验证要么,我会与服务器端验证去。 如果他们的数据输入错误,就快速将 msg 返回给用户,客户端检查更好,但它并不更安全。
您实际上是在问一个关于个人偏好或意见问题的问题。 我只是在 HTML 中使用 JavaScript 从输入字段中获取值。
window.variableName = document.getElementById('id_Name').value;
这行代码从表单输入字段中获取值,并放入一个变量中。 然后您可以将变量发送到.gs
文件。
google.script.run.withFailureHandler(onFailure)
.withSuccessHandler(savedLst)
.writeInputData(variableName);
上面的代码在 HTML 中。 函数writeInputData
位于.gs
脚本文件中。
您可以在调用writeInputData
函数之前检查变量variableName
以进行验证。
if (variableName === "") {
alert("Missing Input");
return false;
} else {
google.script.run.withFailureHandler(onFailure)
.withSuccessHandler(savedLst)
.writeInputData(variableName);
};
还有其他方法可以进行前端数据验证。 您可以组合方法。 如果您发现无法修复的错误,请发布错误消息以及它来自哪一行。
要从 HTML 打印信息,请使用: console.log("some text here: " + variableName);
这将在浏览器的控制台上打印一些内容。 打开开发人员工具和控制台以查看已打印到浏览器控制台的内容。 不要与Logger.log()
混淆,后者将某些内容打印到服务器端 Apps 脚本日志。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.