想讓使用者不需要登入,就能直接上傳檔案到你的「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的畫面中修改程式的名稱,以及要上傳的路徑(資料夾如果不存在則會自行建立)。
2.再來請按下選單的【執行】→【doGet】來讓這隻程式碼能取得Google雲端硬碟的權限。
3.在「需要授權」視窗中按下〔繼續〕。
4.接著會出現一個彈現視窗,要求授予管理Google雲端硬碟的權限,按下〔接受〕即可。
5.如果你懂得基本的HTML語法,可以點選左邊的「form.html」來修改檔案上傳的畫面喔!
二、部署網路應用程式
1.完成授權、程式碼與網頁的修改後,接下來需要將這隻程式碼發佈成為「網路應用程式」,才能讓使用者來存取。請按下【發佈】選單中的【部署為網路應用程式】。
2.在出現的視窗中,完成以下設定:
- 先在「專案版本」中隨便輸入幾個字(中英數字均可),並按下〔儲存新版本〕
- 「將應用程式執行為」設定成「我(xxxxxx@gmail.com)」
- 「具有應用程式存取權的使用者」設成「任何人,甚至是匿名使用者」
- 最後按下〔部署〕按鈕即可完成
3.完成部署之後,畫面上會出現一行又臭又長的網址(可以使用goo.gl之類的短縮網址服務將它縮短),這就是你的檔案上傳系統的網址了,可以將該網址透過社群網站、Email、網頁或其他方式來公佈,知道該網址的使用者就可以免登入直接上傳檔案囉!
三、實際測試檔案上傳
1.將剛才的網址貼到瀏覽器的網址列(請使用其他的瀏覽器或是登出Google再來開啟),就會出現檔案上傳系統的網頁了,接著你可以輸入姓名並選擇檔案,按下〔上傳檔案〕即可。
2.上傳完成後,會出現「檔案上傳成功」的字樣。至於上傳的檔案能夠多大?阿正老師目前還查不到相關資料,不過實際測試的結果,傳個200MB的檔案也不成問題喔!
3.你可以在「Google雲端硬碟」的上傳資料夾中,看到已經上傳的檔案。
4.至於剛才使用者所填寫的「姓名」,則會顯示在檔案的「詳細資料」中,只要點選檔案並按下右上角的〔i〕按鈕,切換到「詳細資料」就可看到底下的「上傳者」了,是不是很方便呢?
※PS:使用者如果上傳的檔名重複怎麼辦? 沒關係,Google雲端硬碟可以允許同檔名的檔案存在喔!
四、多檔案上傳
因為有讀者希望能一次上傳多個檔案,因此阿正老師將該程式改良為多檔版,目前一次可以上傳5個檔案,如果不夠的話還可以自行增加。
新增方式如下:
1.先點選左邊的「form.html」,可看到右邊有五行HTML碼(下圖紅框處),每行表示一個檔案,你可以自己在下面新增,例如要加入第六個檔案上傳元件,可以輸入(下面的myFile6為元件編號,可自行命名但不能重複):
<input type=”file” name=”myFile6“>
2.接著點選左邊的「server.gs」,找到下面紅框處的程式碼,將這段複製起來,貼到紅色箭頭處(也就是在 return “檔案上傳成功… 之前),然後將裡面的變數(黃色螢光筆標示處)改掉,例如 blob5改成blob6、myFile5改成myFile6 (需和form.html裡面的相同)、file5改成file6,如此一來你想要上傳幾個檔案都不成問題啦!
3.完成之後的畫面如下圖,是不是更加方便了呢?
使用Google Apps Script來製作這種上傳系統,除了完全免費、使用簡單之外,也比第三方的同類型網路服務要來得安全許多,大家不妨也照著以上教學過程來試試看吧!
###
感謝分享,使用成功!
想請教一下,他上傳的部分一次只能一個檔案嗎?可否多檔一次選取上傳呢?
不知道dropbox有沒有一樣的功能呢?
有的,請參考本站文章: http://blog.soft.idv.tw/?p=940
若能修改為可多檔上傳就更讚了
我正在改寫script中,還有一些錯誤處理的地方要克服,弄好後我會更新文章
多檔版已經ok囉! 網址: http://goo.gl/CBRO3c
感謝阿正老師!這太實用了!謝謝您
太感謝了
感謝分享,已成功上傳。另外請教,該如何將姓名欄位、檔案欄位設為必填功能。
感謝分享。
自己點選可以看到畫面。
不過朋友反應都會出現「您必須有權限」!
請問該如何解決呢?
「具有應用程式存取權的使用者」是不是沒設成「任何人,甚至是匿名使用者」呢?
阿正好:
我依您的方法製作上傳程式,在電腦上使用是可以的,但是在iPad卻一直要我先登入才能使用,不知是否有法可解?
想請教
問 ONEDRIVE 是否也有這樣的功能呢??
請問資料夾路徑如何設定在子資料夾?
請問一下,不知有沒有辦法將”選擇檔案”的部分設定成固定路徑,例如建立一個資料夾,只要把檔案丟進此資料夾中,就不須選取資料,直接按上傳就好??
我試了好一陣子,可以成功使用了。
但是程式碼的檔案共用權限要開到
網際網路的所有使用者均可以找到並[編輯]
如果是檢視是不能使用的!
請問
上傳之後去雲端看
會顯示 名字再上傳者那邊
那如何才能讓其他資料也顯示在上面?
例如 電話之類的
請問可以設定頁面的標題嗎?
請修改 form.html 即可
請修改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);
依此類推即可
請問可否存放到子目錄下呢?
請問是不是上傳的檔案最多就只有10mb?
還是有哪邊我忘了修正。
阿正老師感謝您的實用分享!
因為實際使用後,發現透過手機填單的,很容易會一個不小心,什麼都沒填或只填了姓名,就先按了送出
想請問是否有方式可以設計防呆,把姓名及上傳檔案設為必備欄呢?
謝謝!!
阿正老師您好
感謝您的教學
傳送檔案 是否能 一次選擇多個檔案一起傳呢?
使用多檔案版本 ,上傳就一直顯示 成功上傳0個檔案。(實際上也沒有成功上傳
單檔案版本卻可以上傳….
好像不行呢,一定要你輸入google帳號密碼才可以用,不知哪裡有問題?
請問若是使用多檔案版本,沒有上傳檔案的話,如何記錄文字呢?
還是可以設定固定上傳空白檔案記錄?
就在發出留言後,突然想到,若只是抓不到 CSS 檔,直接用、把 CSS 寫在 form.html 裡面就好了呀~~~結果就成功了~!!
[…] 讓使用者直接上傳檔案到你的Google雲端硬碟,接收檔案更輕鬆!(新增多檔上… […]
想請問如何更改文字大小與字型??
現在好像檔案容量限制在50MB了…
阿正老師您好,請問有辦法設定期限嗎,謝謝!
謝謝阿正老師,這個好方法解決了我們跨國收集檔案,又不確定對方有沒有Google帳號的問題。
太感謝了!!
感謝阿正老師無私的分享!
是否可支援拖曳上傳的功能?
我按到『授權時』說,要用到Google Cloud Platform 上,且要輸入『信用卡』不知是不是一定要有Google Cloud Platform才可管 api 程式
好困擾,麻煩您幫我解答。謝謝