使用谷歌HTML服务上传文件时验证HTML输入字段

Validating HTML Input fields when uploading file using google HTML Service

本文关键字：HTML 验证 输入 字段 文件 谷歌 服务      更新时间：2023-09-26

我今天大部分时间都在处理这个问题，似乎无法解决我的问题。

我在网上发现了一个使用.gs、html和javascript的脚本，可以将文件上传到谷歌表单。但问题是，我正在尝试修改表单，以确保上传文件的个人也包括他们的姓名和电子邮件。

我在下面包含我的代码。

本质上，在我调用提交按钮后，我无法获得检查2个给定字段的代码。你能提供一些建议吗？如果我取出"check"，程序就会运行。但是，我无法获得正确的代码来检查字段是否已填写。

提前谢谢。

/* The script is deployed as a web app and renders the form */
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html')
            .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  // This is important as file upload fail in IFRAME Sandbox mode.
}
 
/* This function will process the submitted form */
function uploadFiles(form) {
  
  try {
    
    /* Name of the Drive folder where the files should be saved */
    var dropbox = form.myName + "Design request form folder" + form.myEmail;
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    /* Find the folder, create if the folder does not exist */
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    /* Get the file uploaded though the form as a blob */
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    
    /* Set the file description as the name of the uploader */
    file.setDescription("Uploaded by " + form.myName);
        
    /* Return the download URL of the file once its on Google Drive */
    return "File uploaded successfully " + file.getUrl();
    
  } catch (error) {
    
    /* If there's an error, show the error message */
    return error.toString();
  }
  
}
<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
 
<!-- You can also include your own CSS styles -->
<style>
  form { margin: 40px auto; }
  input { display:inline-block; margin: 20px; }
</style>
 
<script>
  
  // The function will be called after the form is submitted
  function uploadFile() {
  var x=document.coForm.fieldName.value;
  if (x == null || x ==""){
   alert(x);
  return false;}
    document.getElementById('uploadFile').value = "Uploading File..";
    google.script.run
       .withSuccessHandler(fileUploaded)
       .uploadFiles(document.getElementById("coForm"));
    return false;
  }
 
  // This function will be called after the Google Script has executed
  function fileUploaded(status) {
    document.getElementById('coForm').style.display = 'none';
    document.getElementById('output').innerHTML = status;
  }
  
</script>
 
<!-- This is the HTML form -->
<form id="coForm" name="coForm">
 
  <!-- Text input fields -->
  <input type="text" class="required" id="fieldName" name="myName" placeholder="Your name..">
  <input type="email" class="required" id="fieldEmail" name="myEmail" placeholder="Your email..">
 
  <!-- File input filed -->
  <input type="file" name="myFile">
 
  <!-- The submit button. It calls the server side function uploadfiles() on click -->
  <input type="submit" id="uploadFile" value="Upload File" onsubmit="uploadFile();">
</form>
 
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>

将"提交"按钮设置为常规按钮，并将属性更改为onmouseup:

<input type="button" id="uploadFile" value="Upload File" onmouseup="uploadFile();">

从输入字段中删除class="required"：

<!-- Text input fields -->
  <input type="text" id="fieldName" name="myName" placeholder="Your name..">
  <input type="email" id="fieldEmail" name="myEmail" placeholder="Your email..">

将此代码添加到uploadFile()函数：

function uploadFile() {
  var name = document.getElementById('fieldName').value;
  var email = document.getElementById('fieldEmail').value;
  console.log('name: ' + name);
  console.log('email: ' + email);
  if (name === "" || email === "") {
    alert("Your name and/or email is missing!");
    return;
  };

注意console.log()语句。它们将信息打印到浏览器控制台日志中。要打开浏览器日志，请按f12键，（对于Chrome和其他一些浏览器）

相关文章：