时间戳

首页 > 解决方案 > 将文件上传到 Google 表格

ajax - 将文件上传到 Google 表格

问题描述

我正在尝试将 PDF 文件上传到 Google Drive 并将链接插入到 Google 表格中的文件。这是阿贾克斯：

    $.ajax({
    type: 'POST',
    url: 'https://script.google.com/macros/s/AKfycbxyjjBv84uONFouZaiNeC2xwoMPP3p-3dzYxbQBCbJnEza0aPn-/exec',
    data: serializedData,
    success: function(result) {
    var myMessage = $(document.activeElement).attr('id');
    $('#sucessMessage2').html('<div class=\"successActive\">Your application has been successfully sent</div>');
    document.getElementById("regform").reset();
    },
    error : function(error) {
    alert('Error: Something went wrong. Please refresh the page and try again');
    }
});

这是HTML：

    <form id="regform">
    <input id="FirstName" tabindex="1" name="FirstName" type="text" placeholder="First Name *" />
    <input id="LastName" tabindex="2" name="LastName" type="text" placeholder="Last Name *" />
    <input id="Occupation" tabindex="3" name="Occupation" type="text" placeholder="Occupation" />
    <input name="Resume" type="file" tabindex="4" /><br/>
    <div class="successMessage" id="sucessMessage2"></div>
    <input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" value="Submit Application to Rent" />
    </form>

和 Code.gs：

    var SHEET_NAME = "Sheet1";
    var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service
    function doGet(e){
    return handleResponse(e);
    }

    function doPost(e){
    return handleResponse(e);
    }

    function handleResponse(e) {
    var lock = LockService.getPublicLock();
    lock.waitLock(30000);  // wait 30 seconds before conceding defeat.

    try {
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);
    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = [];
    for (i in headers){
    if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
    row.push(new Date());
    } else { // else use header name to get data
    row.push(e.parameter[headers[i]]);
    }
    }
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    return ContentService
    .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
    .setMimeType(ContentService.MimeType.JSON);
    } catch(e){
    return ContentService
    .createTextOutput(JSON.stringify({"result":"error", "error": e}))
    .setMimeType(ContentService.MimeType.JSON);
    } finally { //release lock
    lock.releaseLock();
    }
    }
    function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

一切都在谷歌表格中填充，但我不知道如何让简历上传到谷歌驱动器并将链接添加到谷歌表格。

标签： ajaxformsgoogle-apps-scriptgoogle-sheetsgoogle-drive-api

解决方案

您可以使用 和 的组合将文件上传到驱动器，FileReader如下google.script.run所示：

  1. 调整<input name="Resume" type="file" tabindex="4" /><br/>

至

<input id = "pdf" name="Resume" type="file" tabindex="4" /><br/>

  1. 调整

<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" value="Submit Application to Rent" />

至

<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" onClick="formSubmit()" value="Submit Application to Rent" />

  1. 编写javascript函数：
function formSubmit() {
  var pdf = document.getElementById("pdf").files[0];
  var reader  = new FileReader();
    if (pdf) {
        reader.readAsDataURL(pdf); 
        reader.onloadend = function () {
           google.script.run.getResume(reader.result);
          }           
     }       
}
  1. 中Code.gs，添加函数
function getResume(pdf){   
  var mimeType = pdf.substring(5,pdf.indexOf(';'));
  var bytes = Utilities.base64Decode(pdf.substr(pdf.indexOf('base64,')+7));
  var title='my_pdf';
  var blob = Utilities.newBlob(bytes, mimeType, title);
  var file=DriveApp.createFile(blob);    
  var link = file.getUrl();
  Logger.log(link);
}
  1. 根据需要集成link到您现有的代码中，例如将其推row送到电子表格中。

说明：您将FileReaderpdf 文件的内容转换为数据 URL。Apps 脚本可以使用此数据 URL 将文件作为 blob 读取，并将 blob 转换为驱动器上的文件。

更新

如何在google.script.run没有 Ajax 的情况下完全传递表单数据的示例：

索引.html：

<form id="regform">
<input id="FirstName" tabindex="1" name="FirstName" type="text" placeholder="First Name *" />
<input id="LastName" tabindex="2" name="LastName" type="text" placeholder="Last Name *" />
<input id="Occupation" tabindex="3" name="Occupation" type="text" placeholder="Occupation" />
<input id = "pdf" name="Resume" type="file" tabindex="4" /><br/>
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" onClick="formSubmit()" value="Submit Application to Rent" />
    </form>
<script>
function formSubmit() {
  var firstName = document.getElementById("FirstName").value;
  var lastName = document.getElementById("LastName").value;
  var occupation = document.getElementById("Occupation").value;
  var pdf = document.getElementById("pdf").files[0];
  var reader  = new FileReader();
    if (pdf) {
        reader.readAsDataURL(pdf); 
        reader.onloadend = function () {
           google.script.run.withSuccessHandler(success).withFailureHandler(error).getResume(firstName, lastName, occupation, reader.result);
          }           
     }       
}
function success(){
alert ("Your application has been successfully sent");
}
function error(){
alert ("There was an error");
} 
</script>

代码.gs

function doGet(){
  return HtmlService.createHtmlOutput("index.html");
}
function getResume(firstName, lastName, occupation, pdf){ 
  var mimeType = pdf.substring(5,pdf.indexOf(';'));
  var bytes = Utilities.base64Decode(pdf.substr(pdf.indexOf('base64,')+7));
  var title='my_pdf';
  var blob = Utilities.newBlob(bytes, mimeType, title);
  var file=DriveApp.createFile(blob);    
  var link = file.getUrl();
  var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
  var sheet = doc.getSheetByName(SHEET_NAME);  
  var values = [firstName, lastName, occupation, link];
  var nextRow = sheet.getLastRow()+1;
  sheet.getRange(nextRow, 1, 1, values.length).setValues([values]);

}

function setup() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  SCRIPT_PROP.setProperty("key", doc.getId());
}

推荐阅读