将图像上传到 Google 云端硬盘后清除表单字段

2024-02-21

几天来我一直在努力确保在向谷歌驱动器提交 jpg 后,它会清理表单字段并为下一次插入下一条记录做好准备。它复制文件但不重置该字段。我想要的是,一旦他上传文件,他就会重置表单字段,而无需重新加载它等待下一个上传。这个例子是我从互联网上获取的,我正在尝试使其适应我的需要

HTML:

    <html>
     <head>
       <base target="_top">
     </head>
     <body>       
     <form>
       <input type="file" name="file" id="arq" />
       <input type="submit" value="Upload File" id="id"/>
     </form>

    <script>   
       var vCampoEncarregado = document.getElementById('arq');       

       document.querySelector('form').addEventListener('submit',(e)=>{
       e.preventDefault();  
  
       const vFileReader = new FileReader();

       vFileReader.onload = function(e) {
         const vValores = vFileReader.result.split(',');
         const vObj = {
           fileName: document.querySelector('input[id="arq"]').files[0].name,
           mimeType: document.querySelector('input[id="arq"]').files[0].type,
           data: vValores[1] 
         }
       google.script.run.withSuccessHandler().SubirImagemAntes(vObj);     
       }
vFileReader.readAsDataURL(document.querySelector('input[id="arq"]').files[0]);
    
    });
    vCampoEncarregado.value = '';
  
    </script>
    </body>
    </html>

GS:

    function doGet() {
      return HtmlService.createHtmlOutputFromFile('index');
    }

    function SubirImagemAntes(data) {
      const myFile = Utilities.newBlob(Utilities.base64Decode(data.data),     data.mimeType,data.fileName);
      const Id = "ID";
      const folder = DriveApp.getFolderById(Id);
      const fileAdded = folder.createFile(myFile);

      const resp = {
        'url': fileAdded.getUrl(),
        'name': data.fileName
      };

      return resp;
    }

我相信您的目标如下。

  • 您想要在文件上传后重置文件输入标签。

既然如此,下面的修改如何?在这种情况下,您的 Google Apps 脚本不会被修改。您的 HTML 端修改如下。

From:

google.script.run.withSuccessHandler().SubirImagemAntes(vObj); 

To:

google.script.run.withSuccessHandler(res => {
  console.log(res);
  document.getElementById("arq").value = "";
}).SubirImagemAntes(vObj);

Note:

  • 当您修改Web Apps的Google Apps脚本时,请将部署修改为新版本。这样,修改后的脚本就会反映在Web Apps中。请注意这一点。

  • 您可以在我的报告中看到详细信息“在不更改新 IDE 的 Web 应用程序 URL 的情况下重新部署 Web 应用程序(作者:我) https://gist.github.com/tanaikech/ebf92d8f427d02d53989d6c3464a9c43".

  • 整个修改后的脚本如下。

<html>

<head>
  <base target="_top">
</head>

<body>
  <form>
    <input type="file" name="file" id="arq" />
    <input type="submit" value="Upload File" id="id"/>
  </form>

<script>
var vCampoEncarregado = document.getElementById('arq');
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const vFileReader = new FileReader();
  vFileReader.onload = function (e) {
    const vValores = vFileReader.result.split(',');
    const vObj = {
      fileName: document.querySelector('input[id="arq"]').files[0].name,
      mimeType: document.querySelector('input[id="arq"]').files[0].type,
      data: vValores[1]
    }
    google.script.run.withSuccessHandler(res => {
      console.log(res);
      document.getElementById("arq").value = "";
    }).SubirImagemAntes(vObj);
  }
  vFileReader.readAsDataURL(document.querySelector('input[id="arq"]').files[0]);
});
vCampoEncarregado.value = '';
  
</script>
</body>

</html>

参考:

  • withSuccessHandler(函数) https://developers.google.com/apps-script/guides/html/reference/run#withSuccessHandler(Function)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将图像上传到 Google 云端硬盘后清除表单字段 的相关文章

  • 如何获取多个范围并将多个范围的值设置到另一个电子表格

    我想从范围 shUserForm Get Range B14 O100 中记录的内容将所有数据发送到另一个电子表格 我已经实现的是 当我单击或运行脚本时 我只从 B14 014 获取 1 个数据 而不是我希望每个列将其读取为 getRang
  • 谷歌电子表格中的数据绑定?

    是否可以编写一个将两个单元 绑定 在一起的谷歌应用脚 本 例如 如果编辑一张工作表中的单元格 它将自动更新另一张工作表中的匹配单元格 因此 如果sheet1在单元格A1中有一个表示 花费的钱 的值 并且sheet2在单元格B4中有一个表示相
  • 为什么我无法计算正确的 HMAC 签名?

    我正在尝试在 Google Apps 脚本中计算 HMAC 签名 但文档并未 100 清楚地说明我需要如何传递参数 并且我无法获得预期的输出 为了确定我是否获得正确的输出 我将结果与已知良好的 PHP 代码进行比较 该代码是 key a2V
  • 使用 Google 电子表格中的脚本从手机获取我的当前位置

    有没有办法使用 Google Apps 脚本从手机的 GPS 数据中获取我的当前位置 纬度和经度 最好是十进制形式 另外 是否可以打开和关闭 GPS 或者至少检测它是否打开或关闭 这是我尝试做的 我带着电动助力车去一些地方 在每个地方我都会
  • Google Apps onEdit 事件 - event.source 未定义

    Google 文档允许编写脚本 当单元格内容与特定单词匹配时 我试图更改单元格的颜色 我的问题是 onEdit 函数没有按照此处指定的方式工作 https developers google com apps script guide ev
  • 有没有办法在 Gmail 插件中显示模式对话框

    有没有办法在 Gmail 插件中显示模式对话框 类似于电子表格插件 SpreadsheetApp getUi showModalDialog html title 看起来不行 向用户显示一些 UI 的唯一方法是使用Cards https d
  • 提高我的脚本性能 Google Sheets 脚本

    我创建了一个函数 每当我运行 AppendRow 脚本时 AY 列中没有点 的每一行 包含我想要的每个信息 列的数组从该表将被转移到我的主表 其中有13k rows atm 通常 每天大约有 20 40 行被粘贴到第一个工作表中 此脚本会自
  • Google Sheets API v4:batchGet 不起作用

    无法使用 batchGet 让 Google Sheets API v4 返回多个范围值 它给出以下错误 尽管文档说它需要 valueRanges 但所有范围和电子表格 ID 都是正确的 额外的参数块必须是 javascript 对象文字
  • 带有 Google App 脚本的 Google Sheets:如何在返回最终结果之前向单元格写入“状态”消息?

    我有一个函数可能需要一段时间才能返回输出 有没有办法让它在单元格中打印一条消息 然后稍后用输出覆盖该消息 该函数可能需要 30 秒才能运行 并且可能在 20 30 个单元格中使用 因此很高兴看到哪个单元格仍在计算以及哪个单元格已完成 fun
  • Google应用程序脚本忽略数据验证错误

    我有一些具有数据验证规则的工作表可用作下拉列表 当尝试将其他 未经验证的 数据插入这些单元格时 我的代码现在会产生错误 我正在寻找一种方法来忽略数据验证规则并插入数据而不更改已设置的数据验证规则 我只想忽略应用程序脚本错误 您在单元格 U4
  • 对不同长度的数组使用 setValues()

    我在 Google Apps 脚本中有一个二维数组 其中包含不同长度的数组 我想在电子表格中设置数组的值 但是 由于其中的数组长度不同 我收到一个错误 本质上是说范围和数组高度不对齐 我在下面列出了数组结构的示例 如果我向每个单独的数组添加
  • Google 表单中的隐藏字段

    我正在为每次提交的表单添加一个唯一的 ID 现在 我将该 ID 设置为第一个字段 并预先填充了该 ID 以及要求用户不要修改该字段的帮助文本 是否有任何选项无法向用户显示此选项 我假设您只对在用户填写表单之前以编程方式分配唯一 ID 的方式
  • Google 脚本图表默认排除标题

    使用以下脚本 function chartCreation var ss SpreadsheetApp getActive var sheet ss getSheetByName Sheet1 var chart sheet newChar
  • 未记录的 Sheet API 限制问题

    我已经看过人们遇到类似问题的帖子 但找不到明确的答案 我尝试使用以下代码行检索 264735 个插槽的二维数组 var optionalArguments majorDimension ROWS valueRenderOption FORM
  • .setFormula() 并收到错误缺少 ) 参数列表

    I have setFormula 并坚持这一点 我认为问题在于逗号 在发布这个问题之前 我研究了几个在线论坛 但没有运气 也许这里有人可以帮助我 我确实知道使用的规则 and 这就是为什么我尝试了几个公式 但仍然收到错误消息 参数列表后缺
  • 无法实施第三方 Google 日历会议插件

    我正在研究 Google 日历会议插件的实施并发现了一些问题 我按照文档执行示例代码 但它没有按预期工作 从我的角度来看 我的清单文件是完整的 但是当我尝试从 从清单部署 链接发布日历会议插件时 它会打开我的谷歌日历 但它不会显示我的会议
  • 图像未显示在从 HTML 创建的 PDF 上

    我想动态创建 PDF 这意味着我将从 Google Drive 获取文件 然后将它们放入 HTML 代码中 并尝试从中创建 PDF 一切工作正常 除了图像没有显示 我现在正在做的是 从 HTML 字符串创建 HtmlOutput 获取该 H
  • Google电子表格脚本创建特定范围内的数据验证

    我正在尝试这个脚本来创建数据验证 但它总是不起作用 function test validation var Spread SpreadsheetApp getActiveSpreadsheet var Sheet Spread getSh
  • 谷歌电子表格中的“MMMM yy”日期

    我有一个谷歌电子表格 其中我想要一个仅包含月份和年份名称的日期 例如September 2011 而且我还希望月份和年份能够轻松更改 有没有办法获得自定义日期格式来做到这一点 我发现我可以这样做 TEXT 40295 MMMM yy 但是日
  • 使用 Promise 对 Google 表格进行多次查询

    我是一名初学者编码器 需要一些帮助来加快我的 Google 表格查询速度 我环顾四周 找不到解决方案 我正在尝试快速对 Google 表格运行 25 个查询 这就是我的尝试方式 对 Google 工作表运行查询 将结果推送到数组 运行不同的

随机推荐

  • python group by 和 count() 多列

    我有一个像这样的数据框 Country A B C UK 1 0 1 US 1 1 1 GB 0 1 1 UK 1 1 1 US 0 1 1 GB 0 1 1 我需要按国家 地区分组并计算值为 1 的所有列 我坚持为所有列设置列 1 的条件
  • Android 按下了数组中的哪个按钮索引

    如何设置 OnClickListener 来简单地告诉我按下了按钮数组中的哪个索引按钮 我可以使用数组更改这些按钮的文本和颜色 我这样设置它们 TButton 1 Button findViewById R id Button01 TBut
  • Xcode——查找项目中的死方法

    我很好奇是否有任何工具可以为此提供部分解决方案 由于performSelector 这是一个棘手的问题 但工具至少应该能够找出候选者 使人类的工作变得更容易 由于 Objective C 的动态特性 使用静态分析不可能检测已定义但未使用的函
  • make 未对 g++ 使用 -std=c++11 选项

    我正在尝试使用 make 编译 C 文件 但是 默认情况下它不使用 std c 11 标志 每当我需要编译使用 c 11 特定功能的程序时 我都必须使用 g 显式编译它 所以 我想问如何让我的系统上的所有 c 文件自动使用选项 std c
  • 在 Angular 2 中激活路由*之前*解析值

    只要承诺尚未解决 我就想阻止访问路线 另外 我想将该承诺的返回值传递给路由组件 Several https stackoverflow com questions 36260780 angular 2 resolve root compon
  • PHP ssh2_exec 通道退出状态?

    好的 所以 pecl ssh2 应该是 libssh2 的包装器 libssh2 具有 libssh2 channel get exit status 有什么方法可以获取这些信息吗 I NEED STDOUT STDERR 退出状态 我得到
  • 对于 Rails,如何访问或打印配置变量(作为实验或测试/调试)

    例如 在config environments production rb在 Rails 3 应用程序中 有 config serve static assets false 和许多变数 如何将它们作为一个整体全部打印出来 也许在一个对象中
  • 空单元格的数据表默认渲染函数

    我想为我拥有的所有数据表中的所有空单元格定义默认值 但我不想为每一列都这样做 example dataTable ajaxSource sources deep txt columns data engine render function
  • 如何将嵌套的Python字典转换为对象?

    我正在寻找一种优雅的方法来使用带有一些嵌套字典和列表 即javascript样式对象语法 的字典上的属性访问来获取数据 例如 gt gt gt d a 1 b c 2 d hi foo bar 应该可以通过这种方式访问 gt gt gt x
  • appSettings 配置部分中不存在键“UserID”

    突然 当我尝试在设计器中的 Window Forms 应用程序中打开 10 多个表单中的 2 个时 开始出现此错误 为了防止在加载设计器之前可能发生的数据丢失 必须解决以下错误 appSettings 配置部分中不存在键 UserID 它曾
  • 在 Android 手机上录音电话吗?

    我尝试过并使用以下代码来记录拨出电话 但它没有 Override public void onReceive Context context Intent intent this context context if intent getA
  • Laravel 迁移中的时间格式?

    我想要一个输入 您可以在其中输入 EU 格式的时间 例如 12 00 或 21 34 时 分 我怎么做 Schema create posts function Blueprint table table gt increments id
  • 使用 CSS3rotateY 的卡片翻转效果,但具有多个面取决于按钮按下?

    所以我需要创建一个几乎完全相同的翻转图像this http desandro github com 3dtransforms examples card 01 html 但不同之处在于 如果我想要多个按钮并且每个按钮都翻转到特定的面 情况会
  • 安装 ReSharper 后 Visual Studio 2005 Intellisense 停止工作

    我安装了 ReSharper 评估版并将其卸载 之后 Visual Studio 的 Intellisense 停止工作 我已经重新启动了计算机 但仍然存在此问题 有人可以帮我吗 我正在使用 Visual Studio 2005 谢谢 尝试
  • 通过调用.ashx页面下载文件

    我正在从母版页客户端脚本 Jquery 请求 ashx 页面 该脚本具有下载 PDF 文件的代码 当我调试它时 我可以看到 文件下载 代码的执行 但文件没有下载 ajax type POST url FileDownload ashx da
  • 使用 Kerberos 的 SSO

    我正在尝试使用 Kerberos 和 Python Flask kerberos 模块进行身份验证 基本上这是我的代码 DEBUG True app Flask name app config from object name os env
  • g++ 既是 C++ 编译器又是链接器吗?

    我正在查看 Eclipse 中构建的输出 我正在针对 ColdFire 处理器进行交叉编译 编译行如下所示 m68k elf g O2 falign functions 4 IC nburn include IC nburn MOD52 接
  • 更新标准表中的字段 LIPS-LFIMG 时出现问题

    所有的流程看起来都不错 但是当通过调用函数时 更新也失败 需要更新的字段没有更新 不知道问题出在哪里 有人可以帮我解决这个问题吗 我错过了什么步骤吗 错误消息登录 LT PROT DATA LT PROT LIKE PROTT OCCURS
  • C# 在不下载整个文件的情况下获取网络上图像的宽度/高度?

    我相信 JPG 会存储宽度和高度信息在前几个字节内 http en wikipedia org wiki JPEG Syntax and structure 在给定绝对 URI 的情况下获取此信息的最简单方法是什么 首先 您可以使用以下命令
  • 将图像上传到 Google 云端硬盘后清除表单字段

    几天来我一直在努力确保在向谷歌驱动器提交 jpg 后 它会清理表单字段并为下一次插入下一条记录做好准备 它复制文件但不重置该字段 我想要的是 一旦他上传文件 他就会重置表单字段 而无需重新加载它等待下一个上传 这个例子是我从互联网上获取的