文件上传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>
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。