解决input type=file 同一个文件二次上传无效

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 541平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄9年

关注

原创最新推荐文章于 2026-05-23 09:57:10 发布 541 阅读 AI 写同款· GEO 优化 ›

uni-app 实现input:type=file 上传,并实现表单提交问题描述最近在做一个把现有app转成H5的项目，关于上传图片的功能，服务端并未提供上传文件接口。且保存接口需要上传文件与其他信息通过表单提交。表单提交简单我们前端提交formData数据就好了，但是这个上传就有点鸡肋了，uni-app的input type有效值只有4个（text,number,idcard,digit）,这就决定了uni-app 官方提供的上传api是无法满足当前场景的。解决步骤 1.页面渲染完毕后，动态创建一个input：type=file的DOM元素 2.提交时，new一个阅读详情

$element.find("input[type='file']")[0].addEventListener('change', function(e){  
    //解决input type=file 同一个文件二次上传无效的问题
    e.target.value = '';
});

收录于

javascript

当前文章被收录于：

javascript

26 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#前端

自定义input type=file 样式美化input type=file 改变input type=file控件“丑陋面貌” 自定义input type=file 样式，美化input type=file 改变input type=file控件“丑陋面貌” 阅读详情

相关推荐

input type=file 服务器端上传文件

最近遇到个问题，用input type=file 上传文件的时候遇到谷歌只能取到文件名而无法取到全路径的问题，这个是由于浏览器为了安全考虑而屏蔽了，我所知不设置浏览器外可以以下有2种方式，第一、给input type=file 设置 runat=server 节点，另外设置id值。后端就可以取到啦~ 第二、为form设置enctype="multipart/form-data" 节

Trimen123的专栏 4585

input上传文件件过程中，同一个文件二次上传无效

因为change方法监听的是input的value值，只有发生改变时才会去触发change方法，而value在上传文件时保存的是文件的内容，因此只需在上传文件之后对当前的value置空即可。

qq_41838435的博客 1224

自定义input[type=file]上传按钮样式的四种方案，你知道几种？

最近在制作公司官网的时候，遇到了上传文件按钮。这玩意真的恶心啊。因为没有用框架，在谷歌浏览器中，这家伙长这样，属实是难看啊因为以前用的都是框架内的自带的上传组件，第一次自己手写，真的是没经验！我天真的直接在input上进行了修改。最后却是下面的结果，不说了，基础真的差！！！color: red;

专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。 6711

input type=file 同一个文件做两次上传操作，第二次无效解决方法

使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，这个时候第一次上传是完全没问题的，当你第二次上传文件时，如果是不同于上一次上传文件的话是可以正常上传的，不过如果你选择的还是上一个文件，也就是两次上传的文件重复了，那么就会上传失败。input是通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的。读取文件后，记得把input的value重新设置为空即e.target.value=''

qq_43654065的博客 2122

verilog常用模块1——按键消抖模块详解

按键消抖模块key_filter 1. 原理介绍如图，按键未按下时keys信号为高电平，按下则为低电平；通过检测keys信号电平，就可以判断按键状态。但反作用弹簧会导致抖动现象，电平信号出现一段不确定波形一般情况下，抖动的电平信号为1的持续时间不会超过20ms，只要通过对抖动波形的发生时长计时（计数），当为1的时长超过20ms，则可判定进入了发生了按键按下/释放动作，并确定按键状态...

coin的博客 1万+

Windows服务器XMRig挖矿病毒深度清除实战指南

XMRig是一种广泛用于Monero（XMR）加密货币挖矿的开源工具，其在Windows环境中的持久化机制已远超传统木马范畴，融合WMI事件订阅、服务伪装、PowerShell无文件执行与注册表隐写等多重反检测技术。理解其基于行为而非特征的生存逻辑，是实现有效检测与根除的前提。该技术具备强隐蔽性、高自愈性与网络通信合法化特征，常见于RDP弱口令爆破、SMB共享泄露及PowerShell远程执行等非漏洞类入侵场景。本文聚焦Windows原生命令与Sysinternals工具链，提供覆盖进程定位、WMI清理、服

weixin_30535843的博客 730

input文件上传第二次上传失败

上传成功之后设置input的类型为其他任何一个，然后再将类型设置为file就可以啦，我一开始使用的是将value置为空，但是对我没有效果，我的上传是这么写的，跟我写的一样的可以试一下。记得在页面关闭的时候清除定时器。

qq_46222892的博客 709

OpenClaw + Ollama 本地大模型部署教程：彻底告别Token焦虑

leaning_java的博客 1226

input 连续上传同一个文件第二次不会再次触发问题，解决方案e.target.value = ‘‘；位置：看内容

1、//封装的上传excel组件 <template> <el-button @click="clickUpload" style="font-size: 12px; vertical-align: baseline" @mouseover.native="hover = true" @mouseleave.native="hover = false" :plain="plain" > <img v-show=

qq_42859450的博客 1114

ElasticSearch 集群安全加固实战：从零配置TLS证书与密码认证

本文提供了一份详尽的ElasticSearch集群安全加固实战指南，重点介绍了如何从零开始配置TLS证书与用户安全认证。通过分步讲解证书生成、节点配置、集群重启及密码设置，帮助管理员为ES集群构建通信加密与访问控制的双重防线，有效提升数据安全性与合规性。

weixin_29323493的博客 444

【ES】--Elasticsearch的分词器深度研究

分词器是ik_max_word，会将“龙马家书”拆分为“龙马”、“马家”、“家书”。然后filter配置的是edge_ngram_filter，在上面拆分的token词组基础上，按照edge_ngram_filter规则进一步拆分。从结果看：分词器是keyword，filter支持edge_ngram_filter，字符过滤器支持tsconvert【简繁体】。分词器是keyword，表明是不进行分词，但filtet中edge_ngram_filter是按照布长方式拆分token，所以得到如此结果。

寻梦友的博客 2413

解决 input type=file 同一个文件二次上传无效的问题

input type=file 同一个文件二次上传无效的问题

m0_63873004的博客 1179

Unity之OpenXR+XR Interaction Toolkit实现 Gaze眼部追踪

在虚拟现实（VR）和增强现实（AR）应用中，眼动追踪是一项强大而受欢迎的技术。它可以让开发者更好地理解用户的注意力和行为，并创造出更加沉浸和智能的体验。在本文中，我们将探讨如何使用 Unity OpenXR 实现Gaze眼部追踪功能。

TxNet 1751

解决input type=file 同一个文件二次上传无效的问题

在做上传文件的时候，大家会引入input标签。但在实现的过程中，在上传一个文件后，第二次上传同一个文件时会无法触发上传的代码，问题其实这样解决。 <input type="file" ref="referenceUpload" @change="onUpload" st...

chumaobao2468的博客 2719

Arduino ESP8266通过 RF433数据收发实验

Arduino ESP8266通过 RF433射频模块实现数据收发实验写这篇文章，折腾了2天，在没有成功之前，一直在摸索和采坑当中，不要问我黑暗和黎明之间有多长。开发很多时候只问结果，不问过程的，在这里分享来之不易的结果，希望后面的人不要采坑，有成功的案例先河，后面与之相关的应用开发只需要套用模板修改即可实现。实物搭建 RF433模块我使用的是这个：nodemcu 本案例开发所使用到的库：RadioHead：http://www.airspayce.com/mikem/

perseverance51博客 3806

【数据湖仓】：Iceberg、Hudi 和 Paimon 对比

适用于需要多计算引擎支持和复杂查询的离线批处理场景。其中立性和灵活性使其成为构建新型数据平台的理想选择。：在需要高频数据更新和高效小文件管理的场景中表现出色，适合实时数据处理和增量数据更新的业务需求。：专为实时流式数据处理设计，适用于对数据实时性要求高的业务场景，如实时数据分析和实时指标监控。通过以上分析，可以看出 Apache Iceberg、Apache Hudi 和 Apache Paimon 各有其独特的优势和适用场景。企业应根据自身业务需求和技术栈选择合适的数据湖仓方案，以充分发挥其价值。

欢迎来到我的博客，一起探索代码里的世界！ 1607

input[type="file"]上传文件原理详解

input[type="file"]上传文件原理详解最近又搞了一下上传文件功能，用别人的插件不大符合自己要求，还是用HTML5的input[type="file"]比较好控制，现在重新回顾一下使用input[type="file"]上传文件【1】修改input[type="file"]的样式我个人感觉input type=file的样式有点丑，还是修改修改 <a type=...

懒虫翻身的博客 6万+

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏相关源码待公开

多文件上传关于input type=file元素

我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能但一般的做法只是简单的在表单中操作，我来研究一下深层东西想要了解它，就要知道它的内置对象，files 页面上写一个input，然后选俩个图片，打印这个input对象 $("input[name='file1']").change( function(e){ console.log($("i...

Activiti工作流 4736

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料，已经经过了本人的筛选和整理，希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助！

Probability and Statistics - 4th edition

前后端分别判断 input type=file 上传文件是否为空

最近做项目需要上传图片，前后端都需要判断文件是否为空，做一些必要的笔记，一来是对自己学习的知识的巩固，二来对有同样问题的人有参考作用文章目录一前端判断二后台判断三总结一前端判断要想获取type="file"的input内容，用var file = $(“id”).val();肯定是不行的，下面是代码： html上传按钮为： <input type="file" id="reportXML" name="reportXML" title="输入内容" multiple="multi.

ergouy's blog 6357

霍尼韦尔SoftMaster使用说明

elementui与input[type="file"]文件上传

1.elementui文件上传组件 template中 <el-upload :http-request="uploadFile" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" ref="upload" :data="formData" limit="4" ...

weixin_41166682的博客 1万+

HTML input type=file文件选择表单元素图片上传等等

一、- input type=file与文件上传本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下： <input type=file> 但是，为了习惯，我们多写成： <input type="file"> 在HTML5出现之前(XHTML)，我们的闭合规则则有些出入： <input type="file"...

cc的博客 8087

html input type=file

一、 input type=file与文件上传本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：<input type=file>但是，为了习惯，我们多写成：<input type="file">在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：<input type="file" />顾名思...

u010662647的博客 1万+

React input[type=‘file‘] 连续上传同一文件不触发onChange事件的解决方法

在使用type类型为file的input来上传文件时，发现连续上传同一个文件，第二次以后就不会再触发onChange事件，原因是onChange事件触发的条件为其value发生变化，上传文件时，该input的value值为文件在磁盘中的位置。知道了触发条件以后，我们就可对症下药：改变value值即可。方法1 在input元素中添加onClick事件，点击时将其value置空即可。 <inp...

码飞_CC的博客 8661

HTML5中使用type=file的input上传文件权威指南

HTML5中使用type=file的input上传文件权威指南一、入门下面是大家非常熟悉的html5的文件上传代码，可不保证每个人都真的理解背后的知识点。 <input type="file" id="input"> 当我们点击file标签的时候一定会弹出文件选择的界面，当我们选择一个图片或者文件时，浏览器dom中会产生一个fileList对象。通过DOM API我们可以访问...

kouryoushine的博客 2728

onclick触发type=file并上传文件

最近又研究了点前端的东西（小编也是见了鬼，身为后端程序员净干前端活儿了），通过onclick函数触发input的type="file"并实现上传文件，目的是为了美化input的上传文件功能，而且我发现了个事儿，网上的代码有用的很多，实用的没几个，基本贴出来的代码不是不全就是运行报错，这对于新手来说属实很闹心······下面贴代码~ <button id="uploadBtn">走你...