用户上传文件到谷歌驱动器通过JavaScript?

问题描述:

我有一个网络应用程序,我希望用户能够从他们的计算机添加文件并将其上传到我的谷歌驱动器。我有选择文件按钮的工作,但我不知道该功能应该如何看待访问我的谷歌驱动器帐户,并通过点击按钮发送文件。用户上传文件到谷歌驱动器通过JavaScript?

<h4>Upload a file:</h4> 
    <div class="form-group"> 
     <input type="file" id="fileInput" name="fileInput"/> 
    </div><br> 

我把这里面infowindow,我能够搜索并从用户的计算机中选择一个文件。 我真的只是寻找JS功能发送到我的谷歌驱动器。 任何帮助,将不胜感激。

你可以找到你需要的所有信息,然后在Google的API参考中找到一些信息,但我已经在下面复制了上传的重要内容。但是,您肯定需要查看有关身份验证的信息,可在此链接找到:https://developers.google.com/api-client-library/javascript/start/start-js。下面还包括了他们的认证示例。

<!--Add a button for the user to click to initiate auth sequence --> 
<button id="authorize-button" style="visibility: hidden">Authorize</button> 
<script type="text/javascript"> 

    var clientId = '837050751313'; 

    var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM'; 

    var scopes = 'https://www.googleapis.com/auth/plus.me'; 

    function handleClientLoad() { 
    // Step 2: Reference the API key 
    gapi.client.setApiKey(apiKey); 
    window.setTimeout(checkAuth,1); 
    } 

    function checkAuth() { 
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); 
    } 

    function handleAuthResult(authResult) { 
    var authorizeButton = document.getElementById('authorize-button'); 
    if (authResult && !authResult.error) { 
     authorizeButton.style.visibility = 'hidden'; 
     makeApiCall(); 
    } else { 
     authorizeButton.style.visibility = ''; 
     authorizeButton.onclick = handleAuthClick; 
    } 
    } 

    function handleAuthClick(event) { 
    // Step 3: get authorization to use private data 
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult); 
    return false; 
    } 

    // Load the API and make an API call. Display the results on the screen. 
    function makeApiCall() { 
    // Step 4: Load the Google+ API 
    gapi.client.load('plus', 'v1').then(function() { 
     // Step 5: Assemble the API request 
     var request = gapi.client.plus.people.get({ 
     'userId': 'me' 
     }); 
     // Step 6: Execute the API request 
     request.then(function(resp) { 
     var heading = document.createElement('h4'); 
     var image = document.createElement('img'); 
     image.src = resp.result.image.url; 
     heading.appendChild(image); 
     heading.appendChild(document.createTextNode(resp.result.displayName)); 

     document.getElementById('content').appendChild(heading); 
     }, function(reason) { 
     console.log('Error: ' + reason.result.error.message); 
     }); 
    }); 
    } 
</script> 
// Step 1: Load JavaScript client library 
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script> 

一个你有身份验证设置下面的代码是如何上传文件。你也可以使用'PUT'请求。请参阅此链接了解更多信息:https://developers.google.com/drive/web/manage-uploads

POST /upload/drive/v2/files?uploadType=media HTTP/1.1 
Host: www.googleapis.com 
Content-Type: image/jpeg 
Content-Length: number_of_bytes_in_file 
Authorization: Bearer your_auth_token 
+0

我会把POST请求放入函数吗? –

+0

这里是关于使用AJAX和jQuery进行发布请求的信息。在提出问题之前,我真的建议尝试使用简单的Google搜索。我通过Google以最小的努力找到了您的两个问题的答案。 http://www.w3schools.com/jquery/jquery_ajax_get_post.asp – rmn36

我们有同样的问题 - 因此开发一个Web服务匿名上传到网站所有者谷歌驱动器。

https://driveuploader.com/

您可以轻松创建一个可靠的上传组件,它可以嵌入任何网站与一个iframe的代码,类似像YouTube - 或用作其他应用程序的一个基本JavaScript API与网络挂接的一部分。

在创建上传 - 嵌入与类似的代码完成: - 与支持无限文件大小上传(文件上测试了数百GB,是GIGABYTES

<iframe src="https://driveuploader.com/upload/{uploader key}/embed/"></iframe> 

它运行在所有最新的网络浏览器)。

因为该组件是响应式的 - 它也适用于Wordpress或Google协作平台网站。

如果您只需要一个基本页面,您的朋友,学生,同事可以安全地将一些(可能较大的)文件放入Google Drive中,那么也可以免费提供这些文件。

声明:我们是此服务的开发人员。