个人中心
gpt4 book ai didi

javascript - 如何以 HTML 形式上传多个文件？

转载 作者：行者123 更新时间：2023-12-03 06:38:51 27 4
gpt4 key购买 nike

我正在创建一个 HTML 数据表单，可以选择上传 3 个文件和其他输入类型，例如复选框、单选按钮和文本区域。现在我有兴趣了解如何将上传文件发送到 Google 云端硬盘他们可以使用谷歌脚本将其保存到新创建的文件夹中。有人可以帮我吗？ 

<!DOCTYPE html>
<html>
     <head>
    <script>



    </script>
    </head>

<body background="data_image1.jpg">
    <link rel ="stylesheet" href ="styles.css">
     <form id="myForm">

    <font size="6" color="blue">IS-GEO DATA COLLECTION </font>
    <font size="3" color="red" >This form can be used to capture data and metadata collected during field-trips.</font>
    <h4> Type of Data:</h4>

    <br><h4> <font color="red">Please select the type of data that you are collecting: </font></h4>

    <input type= "radio" name= "Typedata" id="imageRadioButton" >Image <br>

    <br><input type= "radio" name="Typedata" id="temperatureRadioButton">Temperature Reading<br>

    <br><input type= "radio" name= "Typedata" id="waterLevelRadioButton" >Water-Level Reading<br>

   <br><input type= "radio" name="Typedata" id="fieldObservationRadioButton"> Field Observation<br>

    <br><input type= "radio" name="Typedata" id="otherRadioButton"> Other<br> 

    <br><input type= "text" name="Typedata"  id="otherRadioButton"><br>                       

    <br> Date of Collection: <br >
    <br>  <input type="date" name="date" id="dateText"> <br>

    <br> Time of Collection: <br>
    <br> <input type="time" name="time" id="timeText"> <br>

    <br> Location: <br>

    <br> <input type= "text" name="location" id="locationText"> <br>

    <br> GPS Coordinates (latitude, longitude decimal degrees) Example: 19.3221, -100.1234:<br>
    <br> <input type= "text" name="coordinates" id="coorinatesText"> <br>

    <br><h4> <font color="red">Select Applicable Categories of Data or the Features Represented by Data: </font> </h4>

    <br> <input type="checkbox" name="categories" id="buildingCheckBox"> Building<br>

    <br>  <input type="checkbox"  name="categories" id ="vegetationCheckBox">Vegetation<br>

    <br> <input type= "checkbox" name="categories" id="waterBodycheckBox"> Water Body<br>

    <br> <input type= "checkbox" name="categories"  id="soilCheckBox" > Soil<br>

     <br> <input type= "checkbox" name="categories"  id="concreteCheckBox"> Concrete<br>

    <br>  <input type= "checkbox"  name="categories" id="vehicleCheckBox">Vehicle<br>

    <br> <input type= "checkbox" name="categories"  id="moutainCheckBox"> Mountain <br>

     <br> <input type= "checkbox" name="categories" id="landsubsidence"> Land Subsidence <br>

    <br>  <input type= "checkbox" name="categories" id="fossilCheckBox">Fossil <br>

    <br> <input type= "checkbox" name="categories" id="signageCheckBox" >Signage<br>

     <br> <input type="checkbox" name="categories" id="bridgesCheckBox"> Bridges <br>

     <br> <input type= "checkbox" name="categories" id="tunnelsCheckBox"> Tunnels <br>

     <br> <input type= "checkbox" name="categories" id="roadCheckBox"> Road<br>

     <br> <input type= "checkbox" name="categories" id="trafficCheckBox"> Traffic Light <br>

     <br>  <input type= "checkbox" name="categories" id="parkCheckBox">Park <br>

    <br>  <input type= "checkbox"  name="categories" id="diggingsiteCheckBox">Digging Site <br>

    <br>  <input type="checkbox" name="categories" id="otherCheckBox">Other<br>
   <input type="text" name="categories" id="otherCheckBox" > <br>

    <br> URL to the Photo of the Object (Web Accessible Path to the Location of the Photo) <br>
    <br> <input type="text" name="File" id="filephoto">
   <input type="file" name="File" id="filephoto"> <br>

    <br> URL to the Photo of Hand-Written Field Notes: <br>
    <br> <input type="text" name="file1" id="filenotes">
    <input type="file" name="myFile1"  id="filenotes"> <br>

    <br>Data Description (Use Keywords or Sentences): <br>
    <br> <input type="text" name="description"  id="Description"> <br>
     <input type="file" name="File2" id="description">
    <br>URL to Related Data:<br>
    <br> <input type="text" name="file3" id="filerelated">
    <label for="myFile">Upload Attachment(s):</label>
      <br> <input type="file" name="filename" id="myFile" multiple>

       <!--<button type='submit'>Submit</button
    onclick="" method="post"> -->

   <!-- <div id='success'></div>
        <button type='submit'>Send</button> -->


  <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
   Custom Theme JavaScript 
  <script src='google-sheet.js'></script>-->


           <input type="button" value="Submit" onclick="iteratorFileUpload()">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>



</form>
</body>
</html>

这是我的谷歌脚本文件。

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.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName);

    var dropbox = "studentfile2"; // 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();
  }
}

最佳答案 

<input type="file" name="file_array[]" />

然后

$_FILES['file_array']

记得添加到表单 enctype="multipart/form-data"

关于javascript - 如何以 HTML 形式上传多个文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38063189/

27 4 0
文章推荐： vue.js - “Cannot read property '在启动vue应用程序时升级' of undefined”
文章推荐： cassandra - 原子批处理在Cassandra中如何工作？
文章推荐： vue.js - VueJS 如何在方法中访问 Mounted() 变量
文章推荐： c#-4.0 - 如何使用 Dapper ORM 获取子对象的值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com