文件上传change事件只执行一次的问题
参考地址:https://blog.csdn.net/john_xiaoweige/article/details/81392110
本节中的注意点:
this.$refs.attenceInput.click();
点击a按钮,相当于点击了按钮B本身哦!
input type=”file“ change事件只执行一次的问题
HTML:<input id="file", type="file" onchange="upload()" ref="referenceUpload" />
回调成功方法里:this.$refs.referenceUpload.value = null;
否者成功后不能够进行二次导入哈!
<template>
<div class="upload-panel">
<div class="panel-heading">考勤导入</div>
<div class="panel-body">
<p><strong>注意事项:</strong><br>1、导入文件格式:.xls,.xlsx<br>2、文件命名规则“年月名”,如:“201705运维部考勤”></a></p>
<p style="margin-top:10px;"><strong>考勤导入:</strong><a class="btn btn-primary btn-xs " @click="chooseFile">选择文件</a></p>
<p>已选择文件:<em style="color:red; font-style:normal;">{{attence}}</em></p><p>{{info}}</p>
<input type="file" style="display:none" name="attence" @change="changeFile($event)" ref="attenceInput" />
</div>
<div class="panel-footer">
<a class="btn btn-primary btn-md" @click="upFile">确认导入</a>
</div>
</div>
</template>
<script>
export default {
name: 'Upload',
data () {
return {
attence: '',
attenceFile: {}
}
},
methods: {
chooseFile () {
this.$refs.attenceInput.click();
},
changeFile (e) {
this.attence = e.target.files[0].name;
this.attenceFile = e.target.files[0];
},
upFile () {
let filename = this.attenceFile.name;
let arr = filename.split('.');//这里这样还有点问题 如果别人是2010.23.34.xls这样的命名会出问题的
if (arr[1] !== 'xls' && arr[1] !== 'xlsx') {
alter('文件格式错误!');
return;
}
let fileData = new window.FormData();
fileData.append('file', this.attenceFile);//file参数名。this.attenceFile是参数内容
// fileData.append('参数key', '内容value');
let xhr = new window.XMLHttpRequest();
xhr.open('POST', 'http://localhost:999/base/upload', true);
xhr.send(fileData);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let response = JSON.parse(xhr.response)
console.log(response )
this.$refs.attenceInput.value = "";//这样才可以进行二次导入
} else {
//导入失败的情况
this.$refs.attenceInput.value = "";//这样才可以进行二次导入
}
}
}
}
}
}
</script>
文件上传change事件只执行一次的问题的更多相关文章
- Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗
Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你没有Hadoop集群的话也没有关系,我这里给出当时我 ...
- vue项目中解决type=”file“ change事件只执行一次的问题
问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...
- Python Paramiko实现sftp文件上传下载以及远程执行命令
一.简介 Paramiko模块是基于Python实现的SSH远程安全连接,用于SSH远程执行命令.文件传输等功能. 安装模块 默认Python没有自带,需要手动安装: pip3 install par ...
- HDwiki文件上传导致远程代码执行漏洞
漏洞版本: HDwiki(2011) 漏洞描述: 互动维客开源系统(HDwiki)作为中国第一家拥有自主知识产权的中文维基(Wiki)系统,由互动在线(北京)科技有限公司于2006 年11月28日正式 ...
- element ui upload 组件多文件上传,最终只显示上传一个的问题
问题描述:一次选多张图片上传的时候界面上只有一张图片显示,并且上传调用的接口次数与选择的图片数量一致,且接口已200. JSON格式,"url"是最终显示的图片地址 { & ...
- input type=”file“ change事件只执行一次的问题
js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...
- input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
- Uploadify多文件上传插件.NET使用案例+PHP使用案例
ploadify是一个非常好用的多文件上传插件 插件下载:http://www.uploadify.com 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码 <%@ ...
- WEB安全性测试之文件上传漏洞
1.漏洞描述:文件上传漏洞,是指可以利用WEB上传一些特定的文件包含特定代码如(<?php phpnfo;?> 可以用于读取服务器配置信息.上传成功后可以点击) 上传漏洞是指用户上传了一个 ...
- WEB安全:文件上传漏洞
文件上传漏洞过程 用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力. 一般的情况有: 上传文件WEB脚本语言,服务器的WEB容器解释并执行了用户上传的脚本,导致代码执行: ...
随机推荐
- 关于Spring注解开发教程,打包全送你
摘要:spring是我们web开发中必不可少的一个框架,基于传统的xml方式配置bean总觉得太过繁琐,从spring2.5之后注解的出现可以大大简化我们的配置. 本文分享自华为云社区<如何高效 ...
- Jenkins 多分支流水线(SVN)
实际应用过程中,一般多分支流水线的方式用得比较多一些, master 对应 生成环境 develop 对应 测试环境, 将不同分支的代码构建到不同的环境中 添加 Jenkinsfile 文件 Jenk ...
- VS IIS Express 启动项目后,绑IP让别人可以访问你的网站
如何VS IIS Express 启动项目后,绑本机IP,让别人可以访问你的网站,方便Debug 一.修改iis配置 1.在web服务器执行后,会运行IIS Express,右击它选择显示所有应用程序 ...
- django读取数据库导出excel
路由 path(r'^export/xls/$', views.export_excel, name='export_excel'), 函数 import xlwt from django.http ...
- linux day1:VMware虚拟机配置 CentOS系统配置
目录 运维岗位说明 计算机的种类 服务器的种类 服务器的品牌 服务器内部组成 缓存和缓冲 服务器磁盘阵列 raid5 linux系统发展史 去IOE运动 虚拟化技术 虚拟化软件下载 VMware安装 ...
- 【Django-Vue】手机号是否存在接口 多方式登录接口 腾讯云短信介绍和申请 api与sdk
目录 昨日回顾 今日内容 0 登录注册功能设计 1 短信登录接口 视图类 2 多方式密码登录接口 视图类 序列化类 路由 3 腾讯云短信介绍和申请 3.1api与sdk 补充 练习 昨日回顾 # 你的 ...
- AtCoder Beginner Contest 204 (AB水题,C题DFS,D题位运算DP,E题BFS好题)
补题链接:Here A - Rock-paper-scissors 石头剪刀布,两方是一样的则输出该值,否则输出该值 int s[4] = {0, 1, 2}; void solve() { int ...
- L1-046 整除光棍 (20分)
问题描述 这里所谓的"光棍",并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可 ...
- 阿里云 X 森马 AIGC T恤设计大赛开启! 穿什么由你定,赢Airpods,作品定制联名T恤
"关于宇宙,我所知道的最富诗意的事实之一就是, 我们身体中的每一个原子都曾经存在于某一颗爆发的恒星里. 组成你左手的原子和组成你右手的原子 很有可能来自不同的恒星, 而我们都是恒星的孩子, ...
- 使用element-plus的el-scrollbar时滚动条没有显示出来但是页面可以滚动的解决办法
如果使用 Element UI 的 el-scrollbar 组件时,滚动条没有显示出来但页面可以滚动,可以尝试调用其 update 方法来更新滚动条. 在适当的时机(例如在数据加载完成后或组件更新后 ...