Question

问题

如何更改此脚本以允许上传多个文件，甚至更改大于5 MB的文件？

当前脚本：

<!-- Written by Amit Agarwal amit@labnol.org --> 

<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
  <div id="forminner">
    <div class="row">
      <div class="col s12">
        <h5 class="center-align teal-text">Submit My Article</h5>
        <p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) Powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
        <label for="name">Article Headline</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
        <label for="email"><a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=byline+%E4%B8%AD%E6%96%87&oq=byline+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0j0i8i10i30k1.13478.26153.0.27447.10.9.1.0.0.0.139.542.8j1.9.0....0...1.1j4.64.psy-ab..0.6.346...0i67k1j0i22i30k1j33i160k1.7bxnoHhXH84">Byline</a> (English, Chinese and/or <a href="https://www.google.com.tw/search?newwindow=1&rlz=1C1NHXL_zh-TWTW740TW740&q=pseudonym+%E4%B8%AD%E6%96%87&oq=pseudonym+%E4%B8%AD%E6%96%87&gs_l=psy-ab.3..0.2596.6799.0.7633.14.10.4.0.0.0.95.562.10.10.0....0...1.1j4.64.psy-ab..0.10.388...0i22i30k1j33i160k1.YTjT9Ex_16I">Pseudonym</a>)</label>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="file-field input-field col s12">
        <div class="btn">
          <span>File</span>
          <input id="files" type="file">
        </div>
        <div class="file-path-wrapper">
          <input class="file-path validate" type="text" placeholder="Select a File to Upload">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="input-field col s6">
        <button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
      </div>   
    </div>
    <div class="row">
      <div class="input-field col s12" id = "progress">
      </div>
    </div>
  </div>
  <div id="success" style="display:none">
    <h5 class="left-align teal-text">File Uploaded</h5>
    <p>Your file has been successfully uploaded.</p>
    <p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>    
    <p class="center-align"><a  class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
  </div>
</form>

<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://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
    <li><a class="btn-floating blue"  href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
    <li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
  </ul>
</div>

<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>

<script>

  var file, 
      reader = new FileReader();

  reader.onloadend = function(e) {
    if (e.target.error != null) {
      showError("File " + file.name + " could not be read.");
      return;
    } else {
      google.script.run
        .withSuccessHandler(showSuccess)
        .uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
    }
  };

  function showSuccess(e) {
    if (e === "OK") { 
      $('#forminner').hide();
      $('#success').show();
    } else {
      showError(e);
    }
  }

  function submitForm() {

    var files = $('#files')[0].files;

    if (files.length === 0) {
      showError("Please select a file to upload");
      return;
    }

    file = files[0];

    if (file.size > 1024 * 1024 * 5) {
      showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
      return;
    }

    showMessage("Uploading file..");

    reader.readAsDataURL(file);

  }

  function showError(e) {
    $('#progress').addClass('red-text').html(e);
  }

  function showMessage(e) {
    $('#progress').removeClass('red-text').html(e);
  }


</script>

背景说明和道歉

大家好，

我意识到这个问题可能已经回答了，但请耐心等待我，因为我不是程序员并且自己没有编写过这个脚本所以我不确定哪个以前的答案可能适用于我的问题。

话虽如此，如果有人能指出我正确的方向，我很乐意删除我的问题或将其作为副本关闭。

最后，我没有和这个脚本结婚，所以如果有人有更好的脚本来建议具有所有功能（多个文件上传，文件大小没有限制），我愿意接受建议。

我也愿意使用任何允许我上传到我的Google云端硬盘的内容，只要它是免费的，因为我们是一个没有资金的志愿者组织，这只是为了让我们的成员能够提交他们的文章我们组织的新闻通讯。

再次感谢并抱歉（可能）重复的问题！

Answer 1

您可以使用 Google Drive Picker ，该文件大小没有上传限制。在使用此代码之前，您需要进行一些配置。

在脚本编辑器中，选择Resources＆gt;开发人员控制台 Project.Enable Drive Api。之后点击Google API控制台。它将重定向到您的API管理器页面。
然后，点击启用API。
在过滤框中，输入＆＃34;选择器＆＃34;，然后选择＆＃34; Google Picker API＆＃34;
在下一个屏幕上，单击“启用API”。
在控制台的左侧导航栏中，单击“凭据”。
然后点击＆＃34;创建凭据＆＃34;然后是API密钥。
创建API密钥后，单击铅笔图标进行编辑。
然后更改＆＃34;密钥限制＆＃34; Under＆＃34;接受请求的选项从这些HTTP引用（网站）＆＃34;，添加这些URL作为引用和然后单击“创建”：
* .google.com
* .googleusercontent.com
复制API密钥并将其粘贴到下面的代码中。 var DEVELOPER_KEY="key"还可以在google驱动器中创建所有文件夹附件将被上传。

创建驱动器文件夹后，添加相应的ID 文件夹到var uploadview = new google.picker.DocsUploadView().setParent('<<Drive API>>');

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <style>
  #attachmentTable{ 
  background: white;
  }
  tr th,tr td{
  text-align:center;
  }
 </style>
</head>
<body style='font-family: cursive;'>
  <div>
    <center><button onclick='getOAuthToken()' style="margin-top:50px;outline:0;" class="btn btn-success">Upload File(s)</button></center>
  <div class='table-responsive' style="display:none;" id="attachmentTableDiv">
  <table id="attachmentTable" class="table table-bordered" style="width:900px;margin:20px auto;float:none;">
      <thead>
        <tr style="background:#f1f1f1;">
          <th>Title</th>
          <th>ID</th>
          <th>URL</th>
          <th>Date Created</th>
          <th>Download</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
    </div>
  </div>
    <script>
    var DEVELOPER_KEY = '<<YOUR API KEY>>'; 
    var pickerApiLoaded = false;

    /**
     * Loads the Google Picker API.
     */
    function onApiLoad() {
      gapi.load('picker', {'callback': function() {
        pickerApiLoaded = true;
      }});
     }


    function getOAuthToken() {
      google.script.run.withSuccessHandler(createPicker).getOAuthToken();
    }


    function createPicker(token) {
      if (pickerApiLoaded && token) {
      // var all         = new google.picker.DocsView(google.picker.ViewId.DOCS); //To upload from Google Drive
       var uploadview  = new google.picker.DocsUploadView().setParent('<<Drive API>>');  //To upload from local machine..Add you google drive folder
       var picker = new google.picker.PickerBuilder()
            .addView(uploadview)
            //.addView(all)
            .hideTitleBar()
            //.setLocale('nl') //--Regional language settings
            //.enableFeature(google.picker.Feature.NAV_HIDDEN)
            .setOAuthToken(token)
            .setSize(536, 350)
            .setDeveloperKey(DEVELOPER_KEY)
            .setCallback(pickerCallback)
            .setOrigin(google.script.host.origin)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .build();
        picker.setVisible(true);
      } else {
        showError('Unable to load the file picker.');
      }
    }

    /**
     * A callback function that extracts the chosen document's metadata from the response object. 
     */
    function pickerCallback(data) {
      var action = data[google.picker.Response.ACTION];
      if (action == google.picker.Action.PICKED) {
        for(var i in data[google.picker.Response.DOCUMENTS]){
        var doc = data[google.picker.Response.DOCUMENTS][i];
        var id = doc[google.picker.Document.ID];
        var url = doc[google.picker.Document.URL];
        var title = doc[google.picker.Document.NAME];
        var dateCreated = doc[google.picker.Document.LAST_EDITED_UTC];
        var date = new Date(dateCreated);
        date=date.toLocaleString();
        $('#attachmentTable tbody').append("<tr><td>"+title+"</td><td>"+id+"</td><td><a href='"+url+"' target='_blank'>Link</a></td><td>"+date+"</td><td><a href='https://drive.google.com/drive/uc?export=download&id="+id+"'><i class='glyphicon glyphicon-download-alt'></i></a></td></tr>");
        $('#attachmentTableDiv').show();
      }
    }
}
  </script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script>google.load("picker", "1", {callback:function(){pickerApiLoaded =!0}});</script>
</body>
</html>

code.gs

/*   
Fetch the oAuthToken 
*/
function getOAuthToken() {
  DriveApp.getRootFolder();
  Logger.log(ScriptApp.getOAuthToken())
  return ScriptApp.getOAuthToken();

}


function doGet(){
return HtmlService.createTemplateFromFile('drivePicker') 
          .evaluate()
          .setTitle('Google Drive Picker')
          .setSandboxMode(HtmlService.SandboxMode.IFRAME);  
}

允许在Google Apps脚本上传多个文件

1 个答案: