3 回答

TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊
更新:Google表單現(xiàn)在可以上傳文件。在Google表單可以上傳文件之前發(fā)布了此答案。
此解決方案不使用Google表單。這是一個(gè)使用Apps Script Web App的示例,它與Google表單非常不同。Web App本質(zhì)上是一個(gè)網(wǎng)站,但您無(wú)法為其獲取域名。這不是Google表單的修改,無(wú)法上傳文件。
注意:我確實(shí)有一個(gè)同時(shí)包含UI服務(wù)和HTML服務(wù)的示例,但是由于不推薦使用UI服務(wù),因此刪除了UI服務(wù)示例。
注意:現(xiàn)在只有唯一的沙箱設(shè)置IFRAME。我想onsubmit在開(kāi)始的表單標(biāo)簽中使用屬性: <form onsubmit="myFunctionName()">,這可能導(dǎo)致表單提交后從屏幕上消失。
如果您使用的是NATIVE模式,則文件上傳Web App可能不再起作用。使用NATIVE模式時(shí),表單提交不會(huì)調(diào)用頁(yè)面從屏幕上消失的默認(rèn)行為。如果您使用的是NATIVE模式,則文件上載表單不再起作用,那么您可能正在使用“提交”類(lèi)型的按鈕。我猜測(cè)您可能還會(huì)使用“ google.script.run”客戶(hù)端API將數(shù)據(jù)發(fā)送到服務(wù)器。如果您希望頁(yè)面在提交表單后從屏幕上消失,則可以采用另一種方法。但是您可能不在乎,甚至不希望頁(yè)面停留在屏幕上。根據(jù)您的需要,您將需要配置設(shè)置并以某種方式編碼。
如果您使用的是“提交”類(lèi)型的按鈕,并且想要繼續(xù)使用它,則可以嘗試event.preventDefault();在提交事件處理函數(shù)中添加到代碼中。否則,您將需要使用google.script.run客戶(hù)端API。
可以使用Apps腳本HTML服務(wù)創(chuàng)建用于將文件從用戶(hù)計(jì)算機(jī)驅(qū)動(dòng)器上載到Google云端硬盤(pán)的自定義表單。這個(gè)例子需要編寫(xiě)一個(gè)程序,但是我在這里提供了所有基本代碼。
本示例顯示了帶有Google Apps腳本HTML服務(wù)的上傳表單。
你需要什么
Google帳號(hào)
Google云端硬碟
Google Apps腳本-也稱(chēng)為Google腳本
Google Apps腳本
結(jié)束Google Apps腳本代碼編輯器的方法有很多種。
直接從以下網(wǎng)址加載App腳本:https: //script.google.com
首先打開(kāi)Google表格,然后打開(kāi)Apps腳本
轉(zhuǎn)到您的Google云端硬盤(pán),然后打開(kāi)“應(yīng)用程序腳本”:https : //drive.google.com/drive/#my-drive
轉(zhuǎn)到您的Google云端硬盤(pán),然后單擊Apps Script項(xiàng)目文件
Google文檔中的Open Apps腳本
等等
我之所以這樣說(shuō)是因?yàn)?,如果您不了解所有可能性,那么可能?huì)有些混亂。Google Apps腳本可以嵌入Google網(wǎng)站,表格,文檔或表單中,也可以作為獨(dú)立應(yīng)用程序使用。
Apps腳本概述
此示例是帶有HTML Service的“獨(dú)立”應(yīng)用程序。
HTML服務(wù)-使用HTML,CSS和Javascript創(chuàng)建Web應(yīng)用
Google Apps腳本的內(nèi)僅包含兩種類(lèi)型的文件Project:
腳本
的HTML
腳本文件具有.gs擴(kuò)展名。該.gs代碼是用JavaScript編寫(xiě)的服務(wù)器端代碼,是Google自己的API的組合。
復(fù)制并粘貼以下代碼
保存
創(chuàng)建第一個(gè)命名版本
發(fā)布它
設(shè)置權(quán)限
您就可以開(kāi)始使用它了。
開(kāi)始于:
在Apps腳本中創(chuàng)建一個(gè)新的空白項(xiàng)目
復(fù)制并粘貼以下代碼:
使用HTML服務(wù)上傳文件:
Code.gs文件(默認(rèn)創(chuàng)建)
//For this to work, you need a folder in your Google drive named:
// 'For Web Hosting'
// or change the hard coded folder name to the name of the folder
// you want the file written to
function doGet(e) {
return HtmlService.createTemplateFromFile('Form')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setTitle('Name To Appear in Browser Tab')
.setSandboxMode();//Defaults to IFRAME which is now the only mode available
}
function processForm(theForm) {
var fileBlob = theForm.picToLoad;
Logger.log("fileBlob Name: " + fileBlob.getName())
Logger.log("fileBlob type: " + fileBlob.getContentType())
Logger.log('fileBlob: ' + fileBlob);
var fldrSssn = DriveApp.getFolderById(Your Folder ID);
fldrSssn.createFile(fileBlob);
return true;
}
創(chuàng)建一個(gè)html文件:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1 id="main-heading">Main Heading</h1>
<br/>
<div id="formDiv">
<form id="myForm">
<input name="picToLoad" type="file" /><br/>
<input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" />
</form>
</div>
<div id="status" style="display: none">
<!-- div will be filled with innerHTML after form submission. -->
Uploading. Please wait...
</div>
</body>
<script>
function picUploadJs(frmData) {
document.getElementById('status').style.display = 'inline';
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 = "The File was UPLOADED!";
}
</script>
</html>
這是一個(gè)完整的工作示例。它只有兩個(gè)按鈕和一個(gè)<div>元素,因此在屏幕上看不到太多。如果.gs腳本成功,則返回true,然后onSuccess運(yùn)行函數(shù)。onSuccess函數(shù)(updateOutput)將內(nèi)部HTML div消息“消息已上傳!” 注入元素。
保存文件,為項(xiàng)目命名
使用菜單:File,Manage Version然后保存第一個(gè)版本
Publish,Deploy As Web App 然后更新
第一次運(yùn)行腳本時(shí),它將要求權(quán)限,因?yàn)樗鼘⑽募4娴津?qū)動(dòng)器中。首次授予權(quán)限后,Apps腳本將停止,并且不會(huì)完全運(yùn)行。因此,您需要再次運(yùn)行它。第一次后,該腳本將不再要求權(quán)限。
Apps腳本文件將顯示在您的Google云端硬盤(pán)中。在Google云端硬盤(pán)中,您可以為有權(quán)訪問(wèn)和使用腳本的人員設(shè)置權(quán)限。通過(guò)簡(jiǎn)單地向用戶(hù)提供鏈接來(lái)運(yùn)行腳本。就像加載網(wǎng)頁(yè)一樣使用鏈接。
在StackOverflow的以下鏈接中可以看到使用HTML服務(wù)的另一個(gè)示例:
使用HTML服務(wù)上傳文件
關(guān)于過(guò)時(shí)的UI服務(wù)的注意事項(xiàng):
UI服務(wù)與getUi()Spreadsheet類(lèi)(或其他類(lèi))的Ui 方法之間存在差異。AppsScript UI服務(wù)已于2014年12月11日棄用。它將繼續(xù)工作一段時(shí)間,但是您鼓勵(lì)使用HTML服務(wù)。
Google文檔-UI服務(wù)
即使UI服務(wù)被棄用,有一個(gè)getUi()電子表格類(lèi)添加的方法自定義菜單,這是不棄用:
電子表格類(lèi)-獲取UI方法
我之所以提及這一點(diǎn),是因?yàn)樗鼈兌际褂眯g(shù)語(yǔ)UI可能會(huì)造成混淆。
UI方法返回一個(gè)Ui返回類(lèi)型。
您可以添加HTML的UI服務(wù),但你不能使用<button>,<input>或<script>與UI服務(wù)的HTML標(biāo)簽。
添加回答
舉報(bào)