Question

我有一个代码，允许我的网站用户上传到中央Google云端硬盘帐户。到目前为止它工作得很好，我只是想添加一个进度条。

在这里，我是HTML格式，我已经能够添加一个进度条，它不会从0％移动。

＆＃13;

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS File Upload</title>
    <style>
    .container {
        width: 500px;
        margin: 0 auto;
    }
    .progress_outer {
        border: 1px solid #000;
    }
    .progress {
        width: 20%;
        background: #DEDEDE;
        height: 20px;  
    }
    </style>

<form id="myForm">
    <input type="text" name="myName" placeholder="Your name..">
    <input type="file" name="myFile">
    <input type="submit" value="Upload File" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
</form>

<div id="output"></div>

<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>

<style>
 input { display:block; margin: 20px; }
</style>

＆＃13;

除此之外，我做了一些研究并找到了一个模板示例，我只是不确定如何正确地将它实现到我现有的代码中。这是我从Caja Playground找到的。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: 37
    });
  });
  </script>
</head>
<body>

<div class="demo">

<div id="progressbar"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->

</body>
</html>

＆＃13;

Answer 1

嗯，你只放了html文件，gs文件在哪里？除非你使用chunk上传^^

，否则它是不可能的

Answer 2

您可以使用MediaUploader js文件等外部库。请参阅以下教程。它包括所有功能，如创建文件夹，上传文件，查看图像，查看内容图像文本，仅显示共享文件等。

Demo of using Google Drive API

公共谷歌驱动器上传的进度条

2 个答案: