fileBlob未从客户端服务器端传递
问题描述:
首先,我从Sandy Good在以下链接中撰写的信息开始写脚本。 Google Forms file upload complete example. 我做了她所说的一切,而且一切正常。fileBlob未从客户端服务器端传递
以下是我已修改的.gs和.html文件,以通过Web表单询问更多信息。
我下面的脚本的问题是fileBlob没有从客户端传递到服务器端。我曾尝试与
google.script.run.withSuccessHandler(updateOutput).processForm($("#myForm")[0]);
更换
google.script.run.withSuccessHandler(updateOutput).processForm(frmData);
,但失败了,给我下面的错误
Uncaught Error: Cannot find method createFile((class)).
我发现是一个空fileBlob。
此外,我已经尝试调用ID myFIle1并可以看到控制台日志中的信息,但仍然得到了与上面相同的错误。
可否请你看看我的脚本,并提供有关为什么fileBlob为空的信息。我错过了Google Developers网站或本网站上的内容吗?由于
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('Form')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setTitle('Name To Appear in Browser Tab')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function processForm(theForm) {
var emailAddress = theForm.email;
var projectName = theForm.projectName;
var zone = theForm.zone;
var fileBlob = theForm.myFile1;
var fldrSssn = DriveApp.getFolderById('folder ID');//you need to put your upload folder id here
var igeURL = fldrSssn.createFile(fileBlob).getId();
Logger.log("Code completed")
return true;
}
Form.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<?!= include('JavaScript'); ?>
<div id="GSAlogo">Insert Logo Band</div>
<table id="CompTool">
<tr><th><h1 id="header">Header Name</h1></th></tr>
<tr><td id="toolInfo">Tool Info.</td></tr>
<form id="myForm">
<tr><td><input name="email" type="email" placeholder="Insert email address"/></td></tr>
<tr><td>Select the project zone:</td></tr>
<tr><td><select>
<option name="zone" value="Arkansas Zone">Arkansas Zone</option>
<option name="zone" value="Austin Zone">Austin Zone</option>
<option name="zone" value="Border El Paso Zone">Border El Paso Zone</option>
<option name="zone" value="Border McAllen Zone">Border McAllen Zone</option>
<option name="zone" value="Border San Antonio Zone">Border San Antonio Zone</option>
<option name="zone" value="Dallas East Texas Zone">Dallas East Texas Zone</option>
<option name="zone" value="Fort Worth Zone">Fort Worth Zone</option>
<option name="zone" value="Houston Zone">Houston Zone</option>
<option name="zone" value="Louisiana Zone">Louisiana Zone</option>
<option name="zone" value="New Mexico Zone">New Mexico Zone</option>
<option name="zone" value="Oklahoma East Zone">Oklahoma East Zone</option>
<option name="zone" value="Oklahoma West Zone">Oklahoma West Zone</option>
<option name="zone" value="West Texas Zone">West Texas Zone</option>
</select></td></tr>
<tr><td><input type="text" name="projectName" value="test folder" placeholder="Please enter a project name"></td></tr>
<tr><td><input name="myFile1" id="myFile1" type="file" accept=".xls,.xlsx" /></td></tr><br/>
<tr><td><input type="button" id="formSave" value="Submit" style="background-color:#00449e; color:white;" onclick="disable(); fileUploadJS(this.parentNode)"/></td></tr><br/>
</form>
<br/>
<br/>
<tr><td id="status" style="display: none">
<!-- div will be filled with innerHTML after form submission. -->
Uploading. Please wait...
</td></tr>
</table>
</body>
</html>
Javascript.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
function disable(){
var fS = document.getElementById('formSave');
fS.disabled = true;
fS.style.color = "black";
fS.style.backgroundColor = "gray";
}
function fileUploadJS(frmData) {
document.getElementById('status').style.display = 'inline';
/*
The script below worked for passing the information to the client side but the fileBlob is blank
var formData = document.getElementById('myForm');
var email = formData[0].value;
console.log('email: ' + email);
var zone = formData[1].value;
console.log('zone: ' + zone);
var projectName = formData[2].value;
console.log('projectName: ' + projectName);
var fileBlob = formData[3];
console.log('fileBlob: ' + fileBlob);
var fileName = fileBlob.name;
console.log('fileName: ' + fileName);
var fileType = fileBlob.type;
console.log('fileType: ' + fileType);
var fileValue = fileBlob.value;
console.log('fileValue: ' + fileValue);
var fileFiles = fileBlob.files;
console.log('fileFiles: ' + fileFiles);
var modFormData = [email, zone, projectName, fileBlob];
*/
google.script.run
.withSuccessHandler(updateOutput)
.processForm(frmData);
}
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput() {
var outputDiv = document.getElementById('status');
outputDiv.innerHTML = "Your file was uploaded.";
console.log('script completed.')
}
function onFailure(error) {
var div = document.getElementById('status');
div.innerHTML = "ERROR: " + error.message;
}
</script>
答
网络首先,解决方案信息来自here。
将表格标签移动到表格标签之外。
前:
<table id="CompTool">
<tr><th><h1 id="header">Header Name</h1></th></tr>
<tr><td id="toolInfo">Tool Info.</td></tr>
<form id="myForm">
后:
<form id="myForm">
<table id="CompTool">
<tr><th><h1 id="header">Header Name</h1></th></tr>
<tr><td id="toolInfo">Tool Info.</td></tr>
另外,我有一个名字添加到选择标记,以便selectedd选择将传递到服务器端脚本。
前:
<tr><td><select>
后:
<tr><td><select name="zone">
你与上传文件夹的ID替换FolderID? – Cooper
是的,我确实在那个地方有一个谷歌驱动器文件夹ID。另外我是该文件夹的所有者。 – wjwelch1
我发现你已经对javascript进行了很多更改。我可能会回到原来的状态并缓慢地添加更改,确保在添加它时调试所有内容。我用过这个例子,它工作得很好。 – Cooper