html页面点击按钮上传文件,点击按钮实现文件上传及控制文件上传类型-程序员宅基地

技术标签: html页面点击按钮上传文件  

1.原生js实现文件上传

html部分:

上传文件

js部分:

upload(event) { //代替执行上传功能

let it = event.target;

$(it).next().click();

},

UploadFile() { //上传文件

let msg = new FormData();

msg.append('file', $('#uploadBillsInp')[0].files[0]);

msg.append('enctype', 'multipart/form-data');

this.$post('接口地址',msg, {

headers: {'Content-Type': 'multipart/form-data'},

fileType: 'text'

}).then(data => {

console.log(data)

});},

2.elementUI实现文件上传

上传

export default{

data(){

return{

fileList: [],

}

},

methods:{

UploadFile(content) {//上传文件

let msg = new FormData();

msg.append('file', content.file);

msg.append('enctype', 'multipart/form-data');

this.$post('接口地址', msg, {

headers: {'Content-Type': 'multipart/form-data'},

fileType: 'text' //上传文件类型设置

}).then(data => {

console.log(data);

}

});

},

}

}

3.文件上传类型正则验证

if (!/\.(png|jpg)$/.test(text)) {

//文件上传类型不是.png和.jpg时需要做的操作

return false;

}

4.重复上传同一张图片时会导致无法上传成功,需要清空value值

$('#uploadBillsInp').val('');

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_35775608/article/details/117875875

智能推荐

STM32+74HC595:带领你10分钟用对74HC595_74hc595连接stm32-程序员宅基地

文章浏览阅读2.4w次,点赞14次,收藏68次。使用的是STM32CBT8,小模块用起来性价比超级高,资源丰富,移植u/COS及HTTP、MQTT协议等等用起来简直欲罢不能,摇摇欲仙!BUT:IO口资源太少了,我想让你驱动100个LED,你缺告诉我,我的要求太多,你满足不了......还好,找到了74HC595,但是网上很多资源讲的我看了半天才总结、提炼并另辟蹊径出来精髓===============================_74hc595连接stm32

莱昂哈德·欧拉生平及其成就简介_欧拉的物理成就-程序员宅基地

文章浏览阅读4.1k次,点赞2次,收藏8次。莱昂哈德·欧拉(Leonhard Euler ,1707年4月15日~1783年9月18日),瑞士数学家、自然科学家。1707年4月15日出生于瑞士的巴塞尔,1783年9月18日于俄国圣彼得堡去世。欧拉出生于牧师家庭,自幼受父亲的影响。13岁时入读巴塞尔大学,15岁大学毕业,16岁获得硕士学位。欧拉是18世纪数学界最杰出的人物之一,他不但为数学界作出贡献,更把整个数学推至物理的领域。他是数学史上最多产的数学家,平均每年写出八百多页的论文,还写了大量的力学、分析学、几何学、变分法等的课本,《无穷小分析引论》、_欧拉的物理成就

Error: PL/SQL: ORA-00980: 同义词转换不再有效_sql数据库中同义词转换不再有效-程序员宅基地

文章浏览阅读1.5w次。今天在写存储过程的时候,碰到一个问题,在执行存储过程的时候总是报错--同义词转换不再有效,发现一个查询语句中的一个表原来使用的是一个同义词,就试着把这个同义词单独拿出来进行查询操作,发现并没有问题。最后,经过一番努力,发现该同义词并不是直接指向一个实体表,而是指向另一个同义词。所以,将改同义词的指向改为直接指向原实体表的指向,问题得到解决。即同义词指向的 object ow_sql数据库中同义词转换不再有效

idea 怎么修改项目名字和modules配名字_idea修改groupid-程序员宅基地

文章浏览阅读2.5k次。我们会遇到很多场景比如说git拉取一个项目改成自己的 或者架构师搭建架构喊你拿过来用 是不是的改名字。mvn idea:module 这个是生成.iml文件 删除以前的.iml.重新导入工程编辑运行。第五 补充 如果发现你改项目能把原来的项目modules也改了。第二步 改 点击project Stucture。a/是项目名字 name 也是。第三步 改modules。_idea修改groupid

信息论复习—循环码-程序员宅基地

文章浏览阅读5.5k次,点赞12次,收藏70次。信息论复习—循环码_循环码

IDEA快捷键大全-程序员宅基地

文章浏览阅读8.9w次,点赞148次,收藏872次。IntelliJ IDEA快捷键大全、快捷键使用教程_idea快捷键

随便推点

5G通信中的TDL模型_3gpp 无线信道模型 那个协议-程序员宅基地

文章浏览阅读4.2w次,点赞13次,收藏74次。本文基于3GPP协议:TS38.901-7.7.2链路级仿真的信道模型包括CDL(Clustered Delay Line,集群延迟线)模型和TDL(Tapped Delay Line,抽头延迟线)模型。本文重点放在TDL模型上。TDL模型用于简化评估,如非MIMO评估,定义在0.5GHz到100GHz的全频率范围内,最大带宽为2GHz。存在三种TDL模型,分别为TDL-A、TDL-B和TDL-C,它们分别代表了三种不同的NLOS(Non-LOS)通道剖面,构建了LOS(Line Of Sight)_3gpp 无线信道模型 那个协议

自己开发基于Web的在线编辑文档控件,可以在线编辑任意文档_在线文档编辑器开发-程序员宅基地

文章浏览阅读2.1w次,点赞6次,收藏5次。 我们知道所谓的在线编辑其实就是从服务器下载,等使用者修改完成后,再上传(回传)的这样一个过程。过程中文件下载容易实现,下载后在客户端打开编辑也容易,难一点的就在上传这一步。 但上传又可以采用http或ftp上传两种方式,如果用ftp上传方式,那就比较简单,但要代码中暴露ftp上传的帐户或密码,并且上传过程无法控制(比如我想把文件放到某一目录下,重名怎么处理,把文件路径存入_在线文档编辑器开发

IBM SVC storage_ibm system storage san voume controller-程序员宅基地

文章浏览阅读2.8k次。IBM SVC storage1. Introduction TheIBM SAN Volume Controller (SVC) is a block storage virtualization appliancethat belongs to the IBM System Storage product family. SVC implements anind_ibm system storage san voume controller

探索和构建 LLaMA 3 架构:深入探讨组件、编码和推理技术(一)

探索和构建 LLaMA 3 架构:深入探讨组件、编码和推理技术(一)Meta 通过推出新的开源 AI 模型 Llama 3 以及新版本的 Meta AI,正在加强其在人工智能 (AI) 竞赛中的竞争力。该虚拟助手由 Llama 3 提供支持,现已可在所有 Meta 平台上使用。

LeetCode.726 原子的数量 C++-程序员宅基地

文章浏览阅读266次。LeetCode.726 原子的数量 原题链接:原子的数量1. 题意:将化学式的各个元素按字典序排序,以(元素+元素个数)的形式依次累加成字符串2. 思路通过pair的形式,将每个元素和该元素的个数对映,括号也与括号后的个数对映,如下图 利用栈结构匹配(),将括号的外的个数,乘以括号里各元素对应的个数。哈希表统计各元素的个数,并以字典序排序3. 代码注释变量定义的解释vector<pa..._c++原子的数量

基于不同CPU架构静态编译QT及相关问题_mips64el编译 curl-程序员宅基地

文章浏览阅读1.9k次。最近在编译linux客户端的时候,出现了瓶颈,不同的CPU + 操作系统 + 内核版本等,造成了客户端维护越来越繁琐,为了提高维护效率,降低维护成本,因此决定采用静态编译。因为是年前的了,所以好多编译时遇到的报错没有截图(所以仅简单做参考记录)面临的问题:后台服务二进制程序依赖glibc,但是不同的操作系统glibc版本不一致,因此程序在不同操作系统运行时会出现版本不符的问题。 QT界面二进制程序除了上面提及glibc的问题,还因为依赖诸多qt库等,导致在不同操作系统中运行报错。好啦,有了问题,_mips64el编译 curl

推荐文章

热门文章

相关标签