我知道这个问题很旧,但是找到它和相关的问题之后,我再也无法使多文件上传正常工作了。因此,在将我的头撞在墙上很多次之后,我想发布一个完整的示例(.html和.gs),以防将来有人在寻找一个入门的例子。当我现在部署它时,它正在工作,并有望为其他人工作。请注意,我只是将驱动器中的文件夹硬编码为可在pre.gs文件中使用,但是可以轻松更改。
form.html:
<body> <div id="formcontainer"> <label for="myForm">Facilities Project Database Attachment Uploader:</label> <br><br> <form id="myForm"> <label for="myForm">Project Details:</label> <div> <input type="text" name="zone" placeholder="Zone:"> </div> <div> <input type="text" name="building" placeholder="Building(s):"> </div> <div> <input type="text" name="propertyAddress" placeholder="Property Address:"> </div> <div> <label for="fileText">Project Description:</label> <textarea name="projectDescription"placeholder="Describe your attachment(s) here:" style ="width:400px; height:200px;" ></textarea> </div> <br> <label for="attachType">Choose Attachment Type:</label> <br> <select name="attachType"> <option value="Pictures Only">Picture(s)</option> <option value="Proposals Only">Proposal(s)</option> <option value="Pictures & Proposals">All</option> </select> <br> <label for="myFile">Upload Attachment(s):</label> <br> <input type="file" name="filename" id="myFile" multiple> <input type="button" value="Submit" onclick="iteratorFileUpload()"> </form> </div> <div id="output"></div><div id="progressbar"> <div ></div></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script><script>var numUploads = {};numUploads.done = 0;numUploads.total = 0;// Upload the files into a folder in drive// This is set to send them all to one folder (specificed in the .gs file)function iteratorFileUpload() { var allFiles = document.getElementById('myFile').files; if (allFiles.length == 0) { alert('No file selected!'); } else { //Show Progress Bar numUploads.total = allFiles.length; $('#progressbar').progressbar({ value : false });//.append("<div >37%</div>"); $(".progress-label").html('Preparing files for upload'); // Send each file at a time for (var i = 0; i < allFiles.length; i++) { console.log(i); sendFileToDrive(allFiles[i]); } }}function sendFileToDrive(file) { var reader = new FileReader(); reader.onload = function (e) { var content = reader.result; console.log('Sending ' + file.name); var currFolder = 'Something'; google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder); } reader.readAsDataURL(file);}function updateProgressbar( idUpdate ){ console.log('Received: ' + idUpdate); numUploads.done++; var porc = Math.ceil((numUploads.done / numUploads.total)*100); $("#progressbar").progressbar({value: porc }); $(".progress-label").text(numUploads.done +'/'+ numUploads.total); if( numUploads.done == numUploads.total ){ //uploadsFinished(); numUploads.done = 0; };}</script> <script> function fileUploaded(status) { document.getElementById('myForm').style.display = 'none'; document.getElementById('output').innerHTML = status; } </script> <style> body { max-width: 400px; padding: 20px; margin: auto; } input { display: inline-block; width: 100%; padding: 5px 0px 5px 5px; margin-bottom: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } select { margin: 5px 0px 15px 0px; } input[type="submit"] { width: auto !important; display: block !important; } input[type="file"] { padding: 5px 0px 15px 0px !important; }#progressbar{ width: 100%; text-align: center; overflow: hidden; position: relative; vertical-align: middle;}.progress-label { float: left;margin-top: 5px; font-weight: bold; text-shadow: 1px 1px 0 #fff; width: 100%; height: 100%; position: absolute; vertical-align: middle; } </style></body>
代码.gs:
function doGet() { return HtmlService.createHtmlOutputFromFile('form') .setSandboxMode(HtmlService.SandboxMode.Iframe);}function uploadFileToDrive(base64Data, fileName) { try{ var splitbase = base64Data.split(','), type = splitbase[0].split(';')[0].replace('data:',''); var byteCharacters = Utilities.base64Depre(splitbase[1]); var ss = Utilities.newBlob(byteCharacters, type); ss.setName(fileName); var dropbox = "Something"; // Folder Name var folder, folders = DriveApp.getFoldersByName(dropbox); if (folders.hasNext()) { folder = folders.next(); } else { folder = DriveApp.createFolder(dropbox); } var file = folder.createFile(ss); return file.getName(); }catch(e){ return 'Error: ' + e.toString(); }}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)