将图片上传到Google电子表格

时间:2013-03-17 13:19:40

标签: google-apps-script google-docs google-docs-api

我正在进行照片拍摄比赛,竞争对手应该使用Google注册表进行注册,并上传他的照片。我在互联网上搜索了一个谷歌脚本,可以插入到表单中使用谷歌表格上传文件,但找不到任何东西。它是可行的,如何,即使有其他想法可以做这样的事情,请告诉我。

5 个答案:

答案 0 :(得分:9)

以下是一个可能的工作流程建议,其中包括表单,包含回复的电子表格以及包含图片的文档。

表单为testable here

电子表格为viewable here

该文档为viewable here

参见编辑2

注意:

  1. 目前它仅适用于小图片,我必须找到解决方案。(参见编辑)
  2. 电子表格中的图片插入不起作用,我现在评论此行...
  3. 这是完整的代码,仍然是草案,但我认为如果我们找到上述问题的解决方案,它可以完全实现。

    编辑: 图片的大小实际上并不相关,我的图片成功比页面大小大4倍,但是PNG格式 - 似乎 .png 在这种情况下更可靠,这毕竟是好消息!顺便说一下,我可以无差别地使用blob,图像文件或所谓的缩略图(它与原版缩小尺寸相同;-)而且我得到的结果总是相同。我想我必须要在另一篇文章中发表一个问题:-D =

    var submissionSSKey = '0AnqSFd3iikE3dGFsUWNpb08zVWx5YjFRckloZ0NFZGc';
    var docurl = 'https://docs.google.com/document/d/1E6yoROb52QjICsEbGVXIBdz8KhdFU_5gimWlJUbu8DI/'
    var listitems = ['Select a category','Portrait','Landscape','Nude','Night shots','Nature','Various']
    var Panelstyle = {'background':'#dddddd','padding':'40px','borderStyle':'ridge','borderWidth':'15PX','borderColor':'#aaaaaa'}
    
    function doGet() {
      var app = UiApp.createApplication().setTitle('Photography contest').setStyleAttribute('padding','50PX');
      var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(400, 200);
      var title = app.createHTML('<B>Photography contest</B>').setStyleAttribute('color','grey').setStyleAttribute('fontSize','25PX');
      var grid = app.createGrid(6,2).setId('grid');
      var list1 = app.createListBox().setName('list1');
       for(var i in listitems){list1.addItem(listitems[i])}    
      var Textbox1 = app.createTextBox().setWidth('150px').setName('TB1');
      var email = app.createTextBox().setWidth('150px').setName('mail');
      var upLoad = app.createFileUpload().setName('uploadedFile');
      var submitButton = app.createSubmitButton('<B>Submit</B>'); 
      var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#bbbbbb').setStyleAttribute('fontSize','20px');
      //file upload
      var cliHandler2 = app.createClientHandler()
      .validateLength(Textbox1, 1, 40).validateNotMatches(list1,'Select a category').validateEmail(email).validateNotMatches(upLoad, 'FileUpload')
      .forTargets(submitButton).setEnabled(true)
      .forTargets(warning).setHTML('Now you can submit your form').setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px');
    
      //Grid layout of items on form
      grid.setWidget(0, 1, title)
          .setText(1, 0, 'Category')
          .setWidget(1, 1, list1.addClickHandler(cliHandler2))
          .setText(2, 0, 'Name')
          .setWidget(2, 1, Textbox1.addClickHandler(cliHandler2))
          .setText(3, 0, 'Email')
          .setWidget(3, 1, email)
          .setText(4, 0, 'File Upload')
          .setWidget(4, 1, upLoad.addChangeHandler(cliHandler2))
          .setWidget(5, 0, submitButton)
          .setWidget(5, 1, warning);
    
      var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE THE FILE IS UPLOADING<B>').setStyleAttribute('background','yellow');
      submitButton.addClickHandler(cliHandler).setEnabled(false);  
      panel.add(grid);
      app.add(panel);
      return app;
    }
    
    
    function doPost(e) {
      var app = UiApp.getActiveApplication();
      var ListVal = e.parameter.list1;
      var textVal = e.parameter.TB1;
      var Email = e.parameter.mail;
      var fileBlob = e.parameter.uploadedFile;
      var img = DocsList.createFile(fileBlob);
      try{
      var folder = DocsList.getFolder('photos');
      }catch(e){DocsList.createFolder('photos');var folder = DocsList.getFolder('photos')}
      img.addToFolder(folder);
      img.removeFromFolder(DocsList.getRootFolder())
      var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
      var lastRow = sheet.getLastRow();
    //  var image = sheet.insertImage(img.getUrl(), 4, lastRow+1)
      var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[ListVal,textVal,Email,img.getUrl()]]);
      var GDoc = DocumentApp.openByUrl(docurl)
      GDoc.appendTable([['Category : '+ListVal,'Name : '+textVal,'Email : '+Email]])
      var par = GDoc.appendParagraph('IMAGE PREVIEW')
      par.insertInlineImage(1, img.getThumbnail())
      GDoc.appendHorizontalRule();
      GDoc.saveAndClose();
      app.add(app.createLabel('Thank you for submitting'));
      return app
    }
    

    编辑2:我找到了(几乎)所有问题的解决方案......以下是为doc预览提供自动图像缩放的新代码(仅限doPost部分)。支持Jpg,png或任何其他常用图像格式...并显示初始大小+重量。我更新了在线测试表。

    电子表格问题目前还没有解决方法,请参阅issue 145,因此我只使用指向图片文件的链接,但这个链接没有按照issue 1239中的说明进行预览,但文档现在可以使用是一个很好的和可用的解决方法(在我看来: - )。

    function doPost(e) {
      var app = UiApp.getActiveApplication();
      var ListVal = e.parameter.list1;
      var textVal = e.parameter.TB1;
      var Email = e.parameter.mail;
      var fileBlob = e.parameter.uploadedFile;
      var blob = fileBlob.setContentTypeFromExtension()
      var img = DocsList.createFile(blob);
      try{
      var folder = DocsList.getFolder('photos');
      }catch(e){DocsList.createFolder('photos');var folder = DocsList.getFolder('photos')}
      img.addToFolder(folder);
      img.removeFromFolder(DocsList.getRootFolder());
      var weight = parseInt(img.getSize()/1000);
      var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
      var lastRow = sheet.getLastRow();
      var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[ListVal,textVal,Email,img.getUrl()]]);
      var GDoc = DocumentApp.openByUrl(docurl)
      GDoc.appendTable([['Category : '+ListVal,'Name : '+textVal,'Email : '+Email]])
      var inlineI = GDoc.appendImage(img);
      var width = inlineI.getWidth();
      var newW = width;
      var height = inlineI.getHeight();
      var newH = height;
      var ratio = width/height
      Logger.log('w='+width+'h='+height+' ratio='+ratio);
      if(width>640){
      newW = 640;
      newH = parseInt(newW/ratio);
      }
      inlineI.setWidth(newW).setHeight(newH)
      GDoc.appendParagraph('IMAGE size : '+width+' x '+height+' (eventually) resized to '+newW+' x '+newH+' for PREVIEW ('+weight+' kB)   ');
      GDoc.appendHorizontalRule();
      GDoc.saveAndClose();
      app.add(app.createLabel('Thank you for submitting'));
      return app
    }
    

答案 1 :(得分:3)

感谢jfreake最近的帖子,我最终解决了所有问题,包括在电子表格中显示图像。 这是我在单独的答案中发布的最终代码,以获得舒适性和可读性。

var submissionSSKey = '0AnqSFd3iikE3dGFsUWNpb08zVWx5YjFRckloZ0NFZGc';
var docurl = 'https://docs.google.com/document/d/1E6yoROb52QjICsEbGVXIBdz8KhdFU_5gimWlJUbu8DI/'
var listitems = ['Select a category','Portrait','Landscape','Nude','Night shots','Nature','Various']
var Panelstyle = {'background':'#dddddd','padding':'40px','borderStyle':'solid','borderWidth':'10PX','borderColor':'#bbbbbb'}

function doGet() {
  var app = UiApp.createApplication().setTitle('Photography contest').setStyleAttribute('padding','50PX');
  var panel = app.createFormPanel().setStyleAttributes(Panelstyle).setPixelSize(400, 200);
  var title = app.createHTML('<B>Photography contest</B>').setStyleAttribute('color','grey').setStyleAttribute('fontSize','25PX');
  var grid = app.createGrid(6,2).setId('grid');
  var list1 = app.createListBox().setName('list1').setWidth('130');
   for(var i in listitems){list1.addItem(listitems[i])}    
  var Textbox1 = app.createTextBox().setWidth('150px').setName('TB1');
  var email = app.createTextBox().setWidth('150px').setName('mail');
  var upLoad = app.createFileUpload().setName('uploadedFile');
  var submitButton = app.createSubmitButton('<B>Submit</B>'); 
  var warning = app.createHTML('Please fill in all fields').setStyleAttribute('background','#bbbbbb').setStyleAttribute('fontSize','18px');
  //file upload
  var cliHandler2 = app.createClientHandler()
  .validateLength(Textbox1, 1, 40).validateNotMatches(list1,'Select a category').validateEmail(email).validateNotMatches(upLoad, 'FileUpload')
  .forTargets(submitButton).setEnabled(true)
  .forTargets(warning).setHTML('Now you can submit your form').setStyleAttribute('background','#99FF99').setStyleAttribute('fontSize','12px');

  //Grid layout of items on form
  grid.setWidget(0, 1, title)
      .setText(1, 0, 'Category')
      .setWidget(1, 1, list1.addClickHandler(cliHandler2))
      .setText(2, 0, 'Name')
      .setWidget(2, 1, Textbox1.addClickHandler(cliHandler2))
      .setText(3, 0, 'Email')
      .setWidget(3, 1, email)
      .setText(4, 0, 'Image File')
      .setWidget(4, 1, upLoad.addChangeHandler(cliHandler2))
      .setWidget(5, 0, submitButton)
      .setWidget(5, 1, warning);

  var cliHandler = app.createClientHandler().forTargets(warning).setHTML('<B>PLEASE WAIT WHILE THE FILE IS UPLOADING<B>').setStyleAttribute('background','yellow');
  submitButton.addClickHandler(cliHandler).setEnabled(false);  
  panel.add(grid);
  app.add(panel);
  return app;
}


function doPost(e) {
  var app = UiApp.getActiveApplication();
  var ListVal = e.parameter.list1;
  var textVal = e.parameter.TB1;
  var Email = e.parameter.mail;
  var fileBlob = e.parameter.uploadedFile;
  var blob = fileBlob.setContentTypeFromExtension()
  var img = DocsList.createFile(blob);
  try{
  var folder = DocsList.getFolder('photos');
  }catch(e){DocsList.createFolder('photos');var folder = DocsList.getFolder('photos')}
  img.addToFolder(folder);
  img.removeFromFolder(DocsList.getRootFolder());
  var weight = parseInt(img.getSize()/1000);
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheetByName('Sheet1');
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[ListVal,textVal,Email,"https://drive.google.com/uc?export=view&id="+img.getId()]]);
  var imageInsert = sheet.getRange(lastRow+1, 5).setFormula('=image("https://drive.google.com/uc?export=view&id='+img.getId()+'")');
  sheet.setRowHeight(lastRow+1, 80);
  var GDoc = DocumentApp.openByUrl(docurl)
  GDoc.appendTable([['Category : '+ListVal,'Name : '+textVal,'Email : '+Email]])
  var inlineI = GDoc.appendImage(img);
  var width = inlineI.getWidth();
  var newW = width;
  var height = inlineI.getHeight();
  var newH = height;
  var ratio = width/height;
  Logger.log('w='+width+'h='+height+' ratio='+ratio);
  if(width>640){
  newW = 640;
  newH = parseInt(newW/ratio);
  }
  inlineI.setWidth(newW).setHeight(newH)
  GDoc.appendParagraph('IMAGE size : '+width+' x '+height+' (eventually) resized to '+newW+' x '+newH+' for PREVIEW ('+weight+' kB)   ');
  GDoc.appendHorizontalRule();
  GDoc.saveAndClose();
  app.add(app.createLabel('Thank you for submitting'));
  return app
}

链接相同:app SS doc

答案 2 :(得分:2)

试试这个

function insertImage() {
  // Retrieve an image from the web.
  var resp = UrlFetchApp.fetch("http://www.google.com/intl/en_com/images/srpr/logo2w.png");

  // Create a document.
  var doc = DocumentApp.openById("");

  // Append the image to the first paragraph.
  doc.getChild(0).asParagraph().appendInlineImage(resp);
}

此链接也可能对您有所帮助:)

http://code.google.com/googleapps/appsscript/class_documentapp_listitem.html#appendInlineImage

快乐的编码!

答案 3 :(得分:1)

要获得电子表格中图片的直接链接,请使用getID功能代替getUrl并将网址添加到Gdrive

更改此内容:

var targetRange = sheet.getRange(lastRow+1, 1, 1, 4)
    .setValues([[ListVal,textVal,Email,img.getUrl()]]);

对此:

var targetRange = sheet.getRange(lastRow+1, 1, 1, 4)
   .setValues([[ListVal,textVal,Email,"https://drive.google.com/uc?export=view&id="+img.getId()]]);

答案 4 :(得分:0)

编辑:我 upgrade 稍微更改了代码,因为正如yyk所提到的, UiApp &#34; doclist&#34;自2014年12月11日起被弃用。我用谷歌文档创建了一个trombinoscope(我不知道英文单词,也许是组图库),人们在表格中上传了他们的图片和名字。我没有使用电子表格。这是代码:

&#13;
&#13;
   function doGet(e) {
var app = UiApp.createApplication().setTitle('Trombi');
var panel = app.createFormPanel();
var grid = app.createGrid(3,2).setId('registrationGrid');
var nameLabel = app.createLabel('Name');
var nameTextbox = app.createTextBox().setWidth('150px').setName('Name');
var submitButton = app.createSubmitButton('<B>send</B>'); 
var warning = app.createHTML('<B>Please wait<B>').setStyleAttribute('background','yellow').setVisible(false)
//file upload
var upLoadTypeLabel = app.createLabel('File to Upload');
var upLoad = (app.createFileUpload().setName('thefile'));
//Grid layout of items on form
grid.setWidget(0, 0, nameLabel)
    .setWidget(0, 1, nameTextbox)
    .setWidget(1, 0, upLoadTypeLabel)
    .setWidget(1, 1, upLoad)
    .setWidget(2, 0, submitButton)
    .setWidget(2, 1, warning)
var cliHandler = app.createClientHandler().forTargets(warning).setVisible(true)
submitButton.addClickHandler(cliHandler);  
panel.add(grid);
app.add(panel);
return app;}

function doPost(e) {
var app = UiApp.getActiveApplication();  
var Name = e.parameter.Name;
//app.getElementById('info').setVisible(true).setStyleAttribute('color','red');
 // data returned is a blob for FileUpload widget
var fileBlob = e.parameter.thefile;  
var doc = DriveApp.createFile(fileBlob).setName(Name); 
var doc = DocumentApp.openById('your key');
var body = doc.getBody();
var inlineI = body.appendImage(fileBlob);
  var width = inlineI.getWidth();
  var newW = width;
  var height = inlineI.getHeight();
  var newH = height;
  var ratio = width/height;
  Logger.log('w='+width+'h='+height+' ratio='+ratio);
  if(width>200){
  newW = 200;
  newH = parseInt(newW/ratio);
  }
  inlineI.setWidth(newW).setHeight(newH)
  body.appendParagraph(Name);
  body.appendHorizontalRule();
doc.saveAndClose();
app.add(app.createLabel('success')); 
return app
 }
&#13;
&#13;
&#13;