2015-08-28 134 views
5

我有一個網絡應用程序,我希望用戶能夠從他們的計算機添加文件並將其上傳到我的谷歌驅動器。我有選擇文件按鈕的工作,但我不知道該功能應該如何看待訪問我的谷歌驅動器帳戶,並通過點擊按鈕發送文件。用戶上傳文件到谷歌驅動器通過JavaScript?

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

我把這裏面infowindow,我能夠搜索並從用戶的計算機中選擇一個文件。 我真的只是尋找JS功能發送到我的谷歌驅動器。 任何幫助,將不勝感激。

回答

0

你可以找到你需要的所有信息,然後在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

1

我們有同樣的問題 - 因此開發一個Web服務匿名上傳到網站所有者谷歌驅動器。

https://driveuploader.com/

您可以輕鬆創建一個可靠的上傳組件,它可以嵌入任何網站與一個iframe的代碼,類似像YouTube - 或用作其他應用程序的一個基本JavaScript API與網絡掛接的一部分。

在創建上傳 - 嵌入與類似的代碼完成: - 與支持無限文件大小上傳(文件上測試了數百GB,是GIGABYTES

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

它運行在所有最新的網絡瀏覽器)。

因爲該組件是響應式的 - 它也適用於Wordpress或Google協作平臺網站。

如果您只需要一個基本頁面,您的朋友,學生,同事可以安全地將一些(可能較大的)文件放入Google Drive中,那麼也可以免費提供這些文件。

聲明:我們是此服務的開發人員。

相關問題