讓使用者直接上傳檔案到你的Google雲端硬碟,接收檔案更輕鬆!(新增多檔上傳)

36
44,497 人次

SNAGHTML1ba1a3c

想讓使用者不需要登入,就能直接上傳檔案到你的「Google雲端硬碟」嗎?其實我們可以利用「Google Apps Script」來製作一個簡單的檔案上傳網頁,就能達到此目的,可以運用在老師收學生的作業或報告、收集某些活動所需的檔案,用途相當多樣,而且完全免費,只要幾個步驟就能輕鬆搞定喔! 還在用E-mail來蒐集檔案或作業嗎?趕快來跟著阿正老師一塊兒來試試看這個超實用的script吧! (2015/4/27 加入多檔上傳版本)

當需要別人上傳檔案給我們的時候,通常最簡單的方式就是用Email了,不過一旦檔案一多,要整理Email裡面的附件就會是一件很痛苦的事,而且Email還有附檔大小的限制。究竟有沒有辦法能夠產生一個簡單的網頁,直接讓使用者們快速上傳檔案到自己的雲端空間呢?

其實市面上也有許多網路服務(例如GoFileDrop)可以達到此目的,只不過幾乎都是需要付費或是有功能限制,而阿正老師曾在「Digital Inspiration」部落格上看過一篇文章,裡面介紹了如何利用「Google Apps Script」(Google應用程式指令碼)讓使用者免登入也能傳檔案到自己的Google雲端硬碟中,過程相當簡單!阿正老師特別將該程式碼改寫為中文界面,來看看以下的介紹吧!

Google Apps Script

一、取得程式碼及授權

1.請先打開瀏覽器,登入Google之後,開啟阿正老師修改的程式碼網址,每開啟一次就會產生一個名為「檔案上傳系統 v1.0 – 副本」的程式碼,你可以依照使用需求複製多份,提供不同的使用者上傳檔案到不同資料夾中

接著可以在Google Apps Script的畫面中修改程式的名稱,以及要上傳的路徑(資料夾如果不存在則會自行建立)。

SNAGHTML1a4b82f

2.再來請按下選單的【執行】→【doGet】來讓這隻程式碼能取得Google雲端硬碟的權限。

SNAGHTML1a7522d

3.在「需要授權」視窗中按下〔繼續〕。

image

4.接著會出現一個彈現視窗,要求授予管理Google雲端硬碟的權限,按下〔接受〕即可。

SNAGHTML1a8a809

5.如果你懂得基本的HTML語法,可以點選左邊的「form.html」來修改檔案上傳的畫面喔!

SNAGHTML1aae8b1

 

二、部署網路應用程式

 

1.完成授權、程式碼與網頁的修改後,接下來需要將這隻程式碼發佈成為「網路應用程式」,才能讓使用者來存取。請按下【發佈】選單中的【部署為網路應用程式】。

SNAGHTML1acbd5e

2.在出現的視窗中,完成以下設定:

  • 先在「專案版本」中隨便輸入幾個字(中英數字均可),並按下〔儲存新版本
  • 「將應用程式執行為」設定成「我(xxxxxx@gmail.com)」
  • 「具有應用程式存取權的使用者」設成「任何人,甚至是匿名使用者
  • 最後按下〔部署〕按鈕即可完成

image

3.完成部署之後,畫面上會出現一行又臭又長的網址(可以使用goo.gl之類的短縮網址服務將它縮短),這就是你的檔案上傳系統的網址了,可以將該網址透過社群網站、Email、網頁或其他方式來公佈,知道該網址的使用者就可以免登入直接上傳檔案囉!

image

 

三、實際測試檔案上傳

 

1.將剛才的網址貼到瀏覽器的網址列(請使用其他的瀏覽器或是登出Google再來開啟),就會出現檔案上傳系統的網頁了,接著你可以輸入姓名並選擇檔案,按下〔上傳檔案〕即可。

SNAGHTML1b937f9

2.上傳完成後,會出現「檔案上傳成功」的字樣。至於上傳的檔案能夠多大?阿正老師目前還查不到相關資料,不過實際測試的結果,傳個200MB的檔案也不成問題喔!

SNAGHTML1b9b18b

3.你可以在「Google雲端硬碟」的上傳資料夾中,看到已經上傳的檔案。

SNAGHTML1bc0ab2

4.至於剛才使用者所填寫的「姓名」,則會顯示在檔案的「詳細資料」中,只要點選檔案並按下右上角的〔i〕按鈕,切換到「詳細資料」就可看到底下的「上傳者」了,是不是很方便呢?

image

※PS:使用者如果上傳的檔名重複怎麼辦? 沒關係,Google雲端硬碟可以允許同檔名的檔案存在喔!

 

 

四、多檔案上傳

 

因為有讀者希望能一次上傳多個檔案,因此阿正老師將該程式改良為多檔版,目前一次可以上傳5個檔案,如果不夠的話還可以自行增加。

新增方式如下:

1.先點選左邊的「form.html」,可看到右邊有五行HTML碼(下圖紅框處),每行表示一個檔案,你可以自己在下面新增,例如要加入第六個檔案上傳元件,可以輸入(下面的myFile6為元件編號,可自行命名但不能重複):

<input type=”file” name=”myFile6“>

image

2.接著點選左邊的「server.gs」,找到下面紅框處的程式碼,將這段複製起來,貼到紅色箭頭處(也就是在 return “檔案上傳成功…  之前),然後將裡面的變數(黃色螢光筆標示處)改掉,例如 blob5改成blob6、myFile5改成myFile6 (需和form.html裡面的相同)、file5改成file6,如此一來你想要上傳幾個檔案都不成問題啦!

image

3.完成之後的畫面如下圖,是不是更加方便了呢?

image

 

使用Google Apps Script來製作這種上傳系統,除了完全免費、使用簡單之外,也比第三方的同類型網路服務要來得安全許多,大家不妨也照著以上教學過程來試試看吧!

 

###

36 意見

  1. 阿正好:
    我依您的方法製作上傳程式,在電腦上使用是可以的,但是在iPad卻一直要我先登入才能使用,不知是否有法可解?

  2. 請問一下,不知有沒有辦法將”選擇檔案”的部分設定成固定路徑,例如建立一個資料夾,只要把檔案丟進此資料夾中,就不須選取資料,直接按上傳就好??

  3. 我試了好一陣子,可以成功使用了。

    但是程式碼的檔案共用權限要開到

    網際網路的所有使用者均可以找到並[編輯]

    如果是檢視是不能使用的!

  4. 請修改form.html
    找到:
    請輸入你的姓名:<input type=”text” name=”myName” placeholder=”姓名”>
    然後複製貼上到下一行並修改,如:
    請輸入你的電話: <input type=”text” name=”myTel” placeholder=”電話”>

    再修改server.gs
    找到:
    file.setDescription(“上傳者: ” + form.myName);
    改成
    file.setDescription(“上傳者: ” + form.myName + “電話: ” + form.myTel);
    依此類推即可

  5. 阿正老師感謝您的實用分享!
    因為實際使用後,發現透過手機填單的,很容易會一個不小心,什麼都沒填或只填了姓名,就先按了送出
    想請問是否有方式可以設計防呆,把姓名及上傳檔案設為必備欄呢?
    謝謝!!

  6. 我按到『授權時』說,要用到Google Cloud Platform 上,且要輸入『信用卡』不知是不是一定要有Google Cloud Platform才可管 api 程式
    好困擾,麻煩您幫我解答。謝謝

發表迴響