2016年7月24日 星期日

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


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

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



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>



沒有留言:

張貼留言