心動~~形動~~~

2016年7月24日星期日

t讓學生直接上傳檔案到老師的Google雲端硬碟

使用Google App Script讓學生可以不用登入，就能直接上傳檔案到老師的Google雲端硬碟

1.開啟程式碼(三選一)： http://goo.gl/H91BDn

檔案上傳系統程式碼(阿正老師修改版)：http://goo.gl/9yf0ke
檔案上傳系統程式碼(多檔版)：http://goo.gl/CBRO3c

2.修改檔名及存放的資料夾名稱，在自己的google雲端硬碟新增要上傳的資料夾名稱

3.點選【執行】→【doGet】，並允許授權

4.部署網路應用程式

5.複製並公佈網址

6.檢視上傳後的檔案

•可在檔案的「詳細資料」中看到上傳者資訊

•重複檔名一樣可以儲存

修改 server.gs
以下為純文字內容，方便大家直接複製使用：

function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {
try {
var dropbox = "Google Apps Script上傳Demo";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("由 " + form.myName + " 上傳" );
file.setName(form.myName)
return "檔案已經上傳成功囉！謝謝您！<br><br>■<a href='" + folder.getUrl() + "' target='_blank'>瀏覽雲端硬碟資料夾</a><br><br>■<a href='" + file.getUrl() + "' target='_blank'>瀏覽雲端硬碟單一檔案";
} catch (error) {
return error.toString();
}
}

修改 form.html

以下為純文字內容，方便大家直接複製使用：

<form id="myForm">
<h3>全國海報比賽作品上傳</h3>
<input type="text" name="myName" placeholder="請輸入學校名稱+姓名">
<input type="file" name="myFile">
<input type="submit" value="開始上傳檔案(檔案上限25MB)"

onclick="this.value='檔案上傳中，請稍候！';
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').style.display = 'block';
document.getElementById('output').innerHTML = status;
}
document.getElementById('output').style.display = 'none';
</script>

<style>
h3 { text-align:center; }
form, #output { width:400px; height: 300px; margin:auto; border: 1px solid #333;
background-image: url(http://www.photovaco.com/wp-content/uploads/2011/09/free-photo-background-986-m.jpg);
background-repeat: no-repeat;
background-position: top center; }
input { display:block; margin: 20px; width:90%; height:2em;}
#output { padding:20px;word-wrap:break-word; }
</style>