使用Google App脚本将多个file upload到Google云端硬盘
我试图一次上传多个文件与我的应用程序。 它识别何时有2个或更多文件被选中。 但是，它只会将选中的第一个file upload到我的驱动器。 另外（虽然很小），我想知道如何改变我的textarea字体为Times New Roman，以保持字体的其余部分一致。
Code.gs
function doGet() { return HtmlService.createHtmlOutputFromFile('form') .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function uploadFiles(form) { try { var foldertitle = form.zone + ' | Building: ' + form.building + ' | ' + form.propertyAddress + ' | ' + form.attachType; var folder, folders = DriveApp.getFolderById("0B7UEz7SKB72HfmNmNnlSM2NDTVVUSlloa1hZeVI0VEJuZUhSTmc4UXYwZjV1eWM5YXJPaGs"); var createfolder = folders.createFolder(foldertitle); folder = createfolder; var blob = form.filename; var file = folder.createFile(blob); file.setDescription(" " + form.fileText); return "File(s) uploaded successfully! Here is the link to your file(s): " + folder.getUrl(); } catch (error) { Logger.log('err: ' + error.toString()); return error.toString(); } } function uploadArquivoParaDrive(base64Data, nomeArq, idPasta) { try{ var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0].replace('data:',''); var byteCharacters = Utilities.base64Decode(splitBase[1]); var ss = Utilities.newBlob(byteCharacters, type); ss.setName(nomeArq); var file = DriveApp.getFolderById("0B7UEz7SKB72HfmNmNnlSM2NDTVVUSlloa1hZeVI0VEJuZUhSTmc4UXYwZjV1eWM5YXJPaGs").createFile(ss); return file.getName(); }catch(e){ return 'Erro: ' + e.toString(); } } form.html
<body> <div id="formcontainer"> <label for="myForm">Facilities Project Database Attachment Uploader:</label> <br><br> <form id="myForm"> <label for="myForm">Project Details:</label> <div> <input type="text" name="zone" placeholder="Zone:"> </div> <div> <input type="text" name="building" placeholder="Building(s):"> </div> <div> <input type="text" name="propertyAddress" placeholder="Property Address:"> </div> <div> <label for="fileText">Project Description:</label> <TEXTAREA name="projectDescription" placeholder="Describe your attachment(s) here:" style ="width:400px; height:200px;" ></TEXTAREA> </div> <br> <label for="attachType">Choose Attachment Type:</label> <br> <select name="attachType"> <option value="Pictures Only">Picture(s)</option> <option value="Proposals Only">Proposal(s)</option> <option value="Pictures & Proposals">All</option> </select> <br> <label for="myFile">Upload Attachment(s):</label> <br> <input type="file" name="filename" id="myFile" multiple> <input type="submit" value="Submit" onclick="iteratorFileUpload()"> </form> </div> <div id="output"></div> <script> function iteratorFileUpload() { var allFiles = document.getElementById('myFile').files; if (allFiles.length == 0) { alert('No file selected!'); } else { // Send each file one at a time var i=0; for (i=0; i < allFiles.total; i+=1) { console.log('This iteration: ' + i); sendFileToDrive(allFiles[i]); }; }; }; function sendFileToDrive(file) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + file.name); google.script.run .withSuccessHandler(fileUploaded) .uploadArquivoParaDrive(content, file.name, currFolder); } reader.readAsDataURL(file); }; </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> // Upload de arquivo dentro das pastas Arquivos Auxiliares function iterarArquivosUpload() { var arquivos = document.getElementById('inputUpload').files; if (arquivos.length == 0) { alert('No file selected!'); } else { //Show Progress Bar numUploads.total = arquivos.length; $('.progressUpload').progressbar({ value : false }); $('.labelProgressUpload').html('Preparando arquivos para upload'); // Send each file at a time for (var arqs = 0; arqs < numUploads.total; arqs++) { console.log(arqs); enviarArquivoParaDrive(arquivos[arqs]); } } } function enviarArquivoParaDrive(arquivo) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + arquivo.name); google.script.run.withSuccessHandler(updateProgressbar).uploadArquivoParaDrive(content, arquivo.name, currFolder); } reader.readAsDataURL(arquivo); } function updateProgressbar( idUpdate ){ console.log('Received: ' + idUpdate); numUploads.done++; var porc = Math.ceil((numUploads.done / numUploads.total)*100); $('.progressUpload').progressbar({value: porc }); $('.labelProgressUpload').html(numUploads.done +'/'+ numUploads.total); if( numUploads.done == numUploads.total ){ uploadsFinished(); numUploads.done = 0; }; } </script> <script> function fileUploaded(status) { document.getElementById('myForm').style.display = 'none'; document.getElementById('output').innerHTML = status; } </script> <style> body { max-width: 400px; padding: 20px; margin: auto; } input { display: inline-block; width: 100%; padding: 5px 0px 5px 5px; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } select { margin: 5px 0px 15px 0px; } input[type="submit"] { width: auto !important; display: block !important; } input[type="file"] { padding: 5px 0px 15px 0px !important; } </style> </body>
我知道这个问题是旧的，但find它和相关的后，我永远无法获得多个file upload工作。 因此，在我的头撞墙后，我想发布一个完整的示例（.html和.gs），以防将来有人正在寻找一个开始。 当我现在部署它，并希望为其他人工作时，这是工作。 请注意，我只是硬盘中的文件夹中code.gs文件中使用，但可以很容易地更改。
form.html：
<body> <div id="formcontainer"> <label for="myForm">Facilities Project Database Attachment Uploader:</label> <br><br> <form id="myForm"> <label for="myForm">Project Details:</label> <div> <input type="text" name="zone" placeholder="Zone:"> </div> <div> <input type="text" name="building" placeholder="Building(s):"> </div> <div> <input type="text" name="propertyAddress" placeholder="Property Address:"> </div> <div> <label for="fileText">Project Description:</label> <TEXTAREA name="projectDescription" placeholder="Describe your attachment(s) here:" style ="width:400px; height:200px;" ></TEXTAREA> </div> <br> <label for="attachType">Choose Attachment Type:</label> <br> <select name="attachType"> <option value="Pictures Only">Picture(s)</option> <option value="Proposals Only">Proposal(s)</option> <option value="Pictures & Proposals">All</option> </select> <br> <label for="myFile">Upload Attachment(s):</label> <br> <input type="file" name="filename" id="myFile" multiple> <input type="button" value="Submit" onclick="iteratorFileUpload()"> </form> </div> <div id="output"></div> <div id="progressbar"> <div class="progress-label"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> var numUploads = {}; numUploads.done = 0; numUploads.total = 0; // Upload the files into a folder in drive // This is set to send them all to one folder (specificed in the .gs file) function iteratorFileUpload() { var allFiles = document.getElementById('myFile').files; if (allFiles.length == 0) { alert('No file selected!'); } else { //Show Progress Bar numUploads.total = allFiles.length; $('#progressbar').progressbar({ value : false });//.append("<div class='caption'>37%</div>"); $(".progress-label").html('Preparing files for upload'); // Send each file at a time for (var i = 0; i < allFiles.length; i++) { console.log(i); sendFileToDrive(allFiles[i]); } } } function sendFileToDrive(file) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + file.name); var currFolder = 'Something'; google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder); } reader.readAsDataURL(file); } function updateProgressbar( idUpdate ){ console.log('Received: ' + idUpdate); numUploads.done++; var porc = Math.ceil((numUploads.done / numUploads.total)*100); $("#progressbar").progressbar({value: porc }); $(".progress-label").text(numUploads.done +'/'+ numUploads.total); if( numUploads.done == numUploads.total ){ //uploadsFinished(); numUploads.done = 0; }; } </script> <script> function fileUploaded(status) { document.getElementById('myForm').style.display = 'none'; document.getElementById('output').innerHTML = status; } </script> <style> body { max-width: 400px; padding: 20px; margin: auto; } input { display: inline-block; width: 100%; padding: 5px 0px 5px 5px; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } select { margin: 5px 0px 15px 0px; } input[type="submit"] { width: auto !important; display: block !important; } input[type="file"] { padding: 5px 0px 15px 0px !important; } #progressbar{ width: 100%; text-align: center; overflow: hidden; position: relative; vertical-align: middle; } .progress-label { float: left; margin-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 #fff; width: 100%; height: 100%; position: absolute; vertical-align: middle; } </style> </body>
code.gs：
function doGet() { return HtmlService.createHtmlOutputFromFile('form') .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function uploadFileToDrive(base64Data, fileName) { try{ var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0].replace('data:',''); var byteCharacters = Utilities.base64Decode(splitBase[1]); var ss = Utilities.newBlob(byteCharacters, type); ss.setName(fileName); var dropbox = "Something"; // Folder Name var folder, folders = DriveApp.getFoldersByName(dropbox); if (folders.hasNext()) { folder = folders.next(); } else { folder = DriveApp.createFolder(dropbox); } var file = folder.createFile(ss); return file.getName(); }catch(e){ return 'Error: ' + e.toString(); } }
你必须一次发送一个文件通过script.run，这是我的实现与FileReaders / ReadAsURL，这使得文件Base64string，可以很容易地传递：
笔记：
- 不知道是否有必要，但我使用IFRAME沙箱
- 我在代码中留下了progressBar，可以将其删除
- 一切都必须是一种forms
- 它接受任何文件types
HTML：
// Upload de arquivo dentro das pastas Arquivos Auxiliares function iterarArquivosUpload() { var arquivos = document.getElementById('inputUpload').files; if (arquivos.length == 0) { alert('No file selected!'); } else { //Show Progress Bar numUploads.total = arquivos.length; $('.progressUpload').progressbar({ value : false }); $('.labelProgressUpload').html('Preparando arquivos para upload'); // Send each file at a time for (var arqs = 0; arqs < numUploads.total; arqs++) { console.log(arqs); enviarArquivoParaDrive(arquivos[arqs]); } } } function enviarArquivoParaDrive(arquivo) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + arquivo.name); google.script.run.withSuccessHandler(updateProgressbar).uploadArquivoParaDrive(content, arquivo.name, currFolder); } reader.readAsDataURL(arquivo); } function updateProgressbar( idUpdate ){ console.log('Received: ' + idUpdate); numUploads.done++; var porc = Math.ceil((numUploads.done / numUploads.total)*100); $('.progressUpload').progressbar({value: porc }); $('.labelProgressUpload').html(numUploads.done +'/'+ numUploads.total); if( numUploads.done == numUploads.total ){ uploadsFinished(); numUploads.done = 0; }; }
Code.GS
function uploadArquivoParaDrive(base64Data, nomeArq, idPasta) { try{ var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0].replace('data:',''); var byteCharacters = Utilities.base64Decode(splitBase[1]); var ss = Utilities.newBlob(byteCharacters, type); ss.setName(nomeArq); var file = DriveApp.getFolderById(idPasta).createFile(ss); return file.getName(); }catch(e){ return 'Erro: ' + e.toString(); } }
2017年5月更新
我更新并改进了barragan的答案。
优点：
- 允许用户创build子文件夹名称以包含在此会话期间上传的所有文件
- 确保这些子文件夹全部存在于Google云端硬盘中的一个指定文件夹中
- 该页面/表单是移动响应的
您可以从这个例子开始创build脚本并了解基础知识。
那么你可以完全用这个replaceform.html ：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Send Files </title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> $(document).ready(function () { function afterSubfolderCreated(subfolderId) { console.log(subfolderId); console.log(allFiles); numUploads.total = allFiles.length; $('#progressbar').progressbar({ value: false }); $(".progress-label").html('Preparing files for upload'); for (var i = 0; i < allFiles.length; i++) { console.log(i); sendFileToDrive(allFiles[i], subfolderId); } } function sendFileToDrive(file, subfolderId) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + file.name); google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, subfolderId); } reader.readAsDataURL(file); } function updateProgressbar(idUpdate) { console.log('Received: ' + idUpdate); numUploads.done++; var porc = Math.ceil((numUploads.done / numUploads.total) * 100); $("#progressbar").progressbar({value: porc}); $(".progress-label").text(numUploads.done + '/' + numUploads.total); if (numUploads.done == numUploads.total) { numUploads.done = 0; $(".progress-label").text($(".progress-label").text() + ': FINISHED!'); $("#progressbar").after('(Optional) Refresh this page if you remembered other screenshots you want to add.');//<a href="javascript:window.top.location.href=window.top.location.href"> does not work } } function fileUploaded(status) { document.getElementById('myForm').style.display = 'none'; document.getElementById('output').innerHTML = status; } var numUploads = {}; numUploads.done = 0; numUploads.total = 0; var allFiles; var frm = $('#myForm'); frm.submit(function () { allFiles = document.getElementById('myFile').files; if (!frm.checkValidity || frm.checkValidity()) { if (allFiles.length == 0) { alert('Error: Please choose at least 1 file to upload.'); return false; } else { frm.hide(); var subfolderName = document.getElementById('myName').value; $.ajax({ url: '',//URL of webhook endpoint for sending a Slack notification data: { title: subfolderName + ' is uploading screenshots', message: '' } }); google.script.run.withSuccessHandler(afterSubfolderCreated).createSubfolder(subfolderName); return false; } } else { alert('Invalid form'); return false; } }); });//end docReady </script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <style> body { padding: 20px; margin: auto; font-size: 20px; } label{ font-weight: bold; } input{ font-size: 20px; padding: 5px; display: inline-block; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .hint{ font-size: 90%; color: #666; } select { margin: 5px 0px 15px 0px; } input[type="file"] { padding: 5px 0px 15px 0px; } #progressbar{ width: 100%; text-align: center; overflow: hidden; position: relative; vertical-align: middle; } .progress-label { float: left; margin-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 #fff; width: 100%; height: 100%; position: absolute; vertical-align: middle; } li{ padding: 10px; } @media only screen and (max-width : 520px) { #logo { max-width: 100%; } } </style> </head> <body> <p> <img src="" id="logo"> </p> <p>This webpage allows you to send me screenshots of your dating profiles.</p> <ol> <li> In each of your dating apps, take a screenshot <a href="https://www.take-a-screenshot.org/" target="_blank">(how?)</a> of every part of every page of your profile. </li> <li> Do the same for each of your photos (at full resolution). </li> <li> In the form below, type your first name and last initial (without any spaces or special characters), such as SallyT. </li> <li> Then click the first button and select all of your screenshot images (all at once). </li> <li> Finally, press the last button to send them all to me! </li> </ol> <form id="myForm"> <div> <label for="myName">Your first name and last initial:</label> </div> <div> <input type="text" name="myName" id="myName" placeholder="SallyT" required pattern="[a-zA-Z]+" value=""> </div> <div> <span class="hint">(No spaces or special characters allowed because this will determine your folder name)</span> </div> <div style="margin-top: 20px;"> <label for="myFile">Screenshot image files:</label> <input type="file" name="filename" id="myFile" multiple> </div> <div style="margin-top: 20px;"> <input type="submit" value="Send File(s) ➔" > </div> </form> <div id="output"></div> <div id="progressbar"> <div class="progress-label"></div> </div> </body> </html>
完全用这个replaceserver.gs ：
function doGet() { var output = HtmlService.createHtmlOutputFromFile('form'); output.addMetaTag('viewport', 'width=device-width, initial-scale=1');// See http://stackoverflow.com/a/42681526/470749 return output.setSandboxMode(HtmlService.SandboxMode.IFRAME); } function uploadFileToDrive(base64Data, fileName, subfolderId) { Logger.log(subfolderId); try{ var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0].replace('data:',''); var byteCharacters = Utilities.base64Decode(splitBase[1]); var ss = Utilities.newBlob(byteCharacters, type); ss.setName(fileName); var subfolder = DriveApp.getFolderById(subfolderId); var file = subfolder.createFile(ss); Logger.log(file); return file.getName() + ' at ' + file.getUrl(); } catch(e){ return 'createFile Error: ' + e.toString(); } } function createSubfolder(subfolderName){ var dropbox = subfolderName + Utilities.formatDate(new Date(), "US/Eastern", "_yyyy-MM-dd"); Logger.log(dropbox); var parentFolderId = "{ID such as 0B9iQ20nrMNYAaHZxRjd}"; var parentFolder = DriveApp.getFolderById(parentFolderId); var folder; try { folder = parentFolder.getFoldersByName(dropbox).next(); } catch(e) { folder = parentFolder.createFolder(dropbox); } Logger.log(folder); return folder.getId(); }
首先，将你的doGet()代码改为：
function doGet() { return HtmlService.createHtmlOutputFromFile('form') .setSandboxMode(HtmlService.SandboxMode.IFRAME); }
不要在表单文件名的末尾使用文件扩展名。 你有， form.html 。 改变只是：
return HtmlService.createHtmlOutputFromFile('form')
然后添加setSandboxMode方法，如果不捕获URLsearchstring参数，则不需要doGet()的参数e 。
从HTML中删除<form>标签。
如果你打算使用jQuery，那么你需要加载jQuery。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
目前，您已经在click属性中使用了google.script.run代码。 你有：
<input type="button" value="Submit" onclick="this.value='Uploading..'; google.script.run.withSuccessHandler(fileUploaded) .uploadFiles(this.parentNode); return false;">
我会把所有的代码放到它自己的函数中：
<input type="submit" value="Submit" onclick="iteratorFileUpload()">
然后在脚本标签中：
<script> function iteratorFileUpload() { var allFiles = document.getElementById('myFile').files; if (allFiles.length == 0) { alert('No file selected!'); } else { // Send each file one at a time var i=0; for (i=0; i < allFiles.length; i+=1) { console.log('This iteration: ' + i); sendFileToDrive(allFiles[i]); }; }; }; function sendFileToDrive(file) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + file.name); google.script.run .withSuccessHandler(fileUploaded) .uploadFiles(file.name); } reader.readAsDataURL(file); }; </script>
作为@ barragan的答案，这里是我经过数小时寻找许多人问的问题后find的最佳答案，我已经做了一些改进devise的一些发展，为其他人作为感谢。 仍然有一些错误和铬似乎耗尽内存，并放弃超过100MB的任何文件
这里是一个真人版
server.gs
'function doGet() { return HtmlService.createHtmlOutputFromFile('form') .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function uploadFileToDrive(base64Data, fileName) { try{ var splitBase = base64Data.split(','), type = splitBase[0].split(';')[0].replace('data:',''); var byteCharacters = Utilities.base64Decode(splitBase[1]); var ss = Utilities.newBlob(byteCharacters, type); ss.setName(fileName); var dropbox = "Something"; // Folder Name var folder, folders = DriveApp.getFoldersByName(dropbox); if (folders.hasNext()) { folder = folders.next(); } else { folder = DriveApp.createFolder(dropbox); } var file = folder.createFile(ss); return file.getName(); }catch(e){ return 'Error: ' + e.toString(); } } '
form.html
<head> <base target="_blank"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Focallocal Uploader</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <div align="center"> <p><img src="http://news.focallocal.org/wp-content/uploads/2015/03/FOCALLOCAL-Website-Text-Header.png" width="80%"></p> </div> </head> <body> <div id="formcontainer" width="50%"> <label for="myForm">Focallocal Community G.Drive Uploader</label> <br> <br> <form id="myForm" width="50%"> <label for="myForm">Details</label> <div> <input type="text" name="Name" placeholder="your name"> </div> <div> <input type="text" name="gathering" placeholder="which fabulous Positive Action you're sending us"> </div> <div> <input type="text" name="location" placeholder="the town/village/city and country month brightend by positivity"> </div> <div> <input type="text" name="date" placeholder="date of the beautiful action"> </div> <div width="100%" height="200px"> <label for="fileText">would you like to leave a short quote?</label> <TEXTAREA name="Quote" placeholder="many people would love to share in your experience. if you have more than a sentence or two to write, why not writing an article the Community News section of our website?" ></TEXTAREA> </div> <br> <br> <label for="myFile">Upload Your Files:</label> <br> <input type="file" name="filename" id="myFile" multiple> <input type="button" value="Submit" onclick="iteratorFileUpload();"> </form> </div> <div id="output"></div> <div id="progressbar"> <div class="progress-label"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> var numUploads = {}; numUploads.done = 0; numUploads.total = 0; // Upload the files into a folder in drive // This is set to send them all to one folder (specificed in the .gs file) function iteratorFileUpload() { var allFiles = document.getElementById('myFile').files; if (allFiles.length == 0) { alert('No file selected!'); } else { //Show Progress Bar numUploads.total = allFiles.length; $('#progressbar').progressbar({ value : false });//.append("<div class='caption'>37%</div>"); $(".progress-label").html('Preparing files for upload'); // Send each file at a time for (var i = 0; i < allFiles.length; i++) { console.log(i); sendFileToDrive(allFiles[i]); } } } function sendFileToDrive(file) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + file.name); var currFolder = 'Something'; google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder); } reader.readAsDataURL(file); } function updateProgressbar( idUpdate ){ console.log('Received: ' + idUpdate); numUploads.done++; var porc = Math.ceil((numUploads.done / numUploads.total)*100); $("#progressbar").progressbar({value: porc }); $(".progress-label").text(numUploads.done +'/'+ numUploads.total); if( numUploads.done == numUploads.total ){ //uploadsFinished(); numUploads.done = 0; }; } </script> <script> function fileUploaded(status) { document.getElementById('myForm').style.display = 'none'; document.getElementById('output').innerHTML = status; } </script> <style> body { max-width: 60%; padding: 20px; margin: auto; } input { display: inline-block; width: 50%; padding: 5px 0px 5px 5px; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } select { margin: 5px 0px 15px 0px; } input[type="submit"] { width: auto !important; display: block !important; } input[type="file"] { padding: 5px 0px 15px 0px !important; } #progressbar{ width: 40%; text-align: center; overflow: hidden; position: relative; vertical-align: middle; } .progress-label { float: left; margin-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 #fff; width: 100%; height: 100%; position: absolute; vertical-align: middle; } </style> </body>
我无法让文本字段发送一封包含详细信息的电子邮件，并且在计算出如何将它们连接到Google Spreadsheet之前耗尽了时间，因此目前它们不logging添加的信息
作为一个额外的好处，它看起来神话般的是在form.html
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;"> <a class="btn-floating btn-large red"> <i class="large material-icons">menu</i> </a> <ul> <li><a class="btn-floating red" href="https://focallocal-a-positive-action-movement.myshopify.com/" target="_blank" title="Pimp your Cool at the Positive Action Shop"><i class="material-icons">monetization_on</i></a></li> <li><a class="btn-floating blue" href="https://www.youtube.com/user/Focallocal" target="_blank" title="Follow the Positive Action Youtube Channel"><i class="material-icons">video_library</i></a></li> <li><a class="btn-floating green" href="http://focallocal.org/" target="_blank" title="Read our About Us Page"><i class="material-icons">help</i></a></li> </ul> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> <script src="https://gumroad.com/js/gumroad.js"></script>
由于一些被调用的脚本导致了问题，我又把它拿出来了。 如果任何人都可以修复它们，它们会增加表单的外观和function
*编辑：我一直在玩它，只有大约一半的文件发送似乎到达，所以这里仍然有一些问题，这两个代码在这里atm
