input type="file"使用
问题:
在实际开发过程中,会遇到上传文件的一些需求。但是使用原生的<input type="file" />
在使用中存在一些问题
- 在未上传文件时,显示"no file choosen",用户界面不友好,不可配置
- 上传同一个文件,不会触发
change
事件,即使该文件做过修改 - 用户如果在上传过程中点击了“取消”,已经上传的文件会被移除
解决思路
在阅读了一些源码之后,总结了如下的解决方案。有点偷梁换柱的意思:
- 将真正的
<input type="file" />
隐藏,使用自定义的button
通过$refs
去触发文件上传,实现自定义显示 - 文件上传之后,处理完文件,将
<input type="file" />
的value
设置为null,这样下次即使上传的是同一个文件,仍然会触发change
事件 - 使用上述方法,点击取消文件被移除,但是不影响页面展示
具体实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://unpkg.com/vue"></script>
<title>Vue</title>
</head>
<body>
<div id="app">
<button type="button" @click="click">
<span v-if="fileName">重新上传</span>
<span v-else>上传文件</span>
</button>
<span>{{fileName}}</span>
<input type="file" ref="uploadFile" style="display:none" accept="image/gif, image/jpeg" @change="upload"/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
fileName: ''
},
methods: {
click () {
// 偷梁换柱,触发文件上传
this.$refs.uploadFile.click();
},
upload (event) {
let files = event.target.files || event.dataTransfer.files;
if (!files.length) {
this.fileName = '';
return;
}
this.fileName = files[0].name;
// 上传之后调用接口...
let params = new FormData();
params.append('file', files[0]);
console.log(params);
this.$refs.uploadFile.value = null; // 移除文件,可以保证上传同样的文件时,也会触发change事件
}
}
})
</script>
</body>
</html>
感想
遇到问题的时候多去看看别人是怎么写的,借鉴一下,解决问题的同时能够学习很多东西。
input type="file"使用的更多相关文章
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- html中,文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- Android:让WebView支持<input type=”file”…>元素
最近在做一个活动页面:用户上传一张图片进行缩放.旋转后点击下一步填写内容后生成图片! 做好后经过各种测试是没有问题的,基本没有什么明显BUG,流程都能走通,但是嵌入到APP后,问题就来了! 在IOS上 ...
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- 原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...
- 【原创】js中input type=file的一些问题
1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
随机推荐
- 05 - Tomcat 线程池的配置与优化
添加 Executor 在server.xml中的Service节点里面,增加executor节点,然后配置connector的executor属性,如下: <Executor name=&qu ...
- 比率(ratio)|帕雷托图|雷达图|轮廓图|条形图|茎叶图|直方图|线图|折线图|间隔数据|比例数据|标准分数|标准差系数|离散系数|平均差|异众比率|四分位差|切比雪夫|右偏分布|
比率是什么? 比率(ratio) :不同类别数值的比值 在中文里,比率这个词被用来代表两个数量的比值,这包括了两个相似却在用法上有所区分的概念:一个是比的值:另一是变化率,是一个数量相对于另一数量的变 ...
- LG_2967_[USACO09DEC]视频游戏的麻烦Video Game Troubles
题目描述 Farmer John's cows love their video games! FJ noticed that after playing these games that his c ...
- 未来科技城 x 奇点云打造「企业数据大脑」,助力1.3万家企业服务
“当前,政府数字化和数字政府建设已成为一种趋势.一种必然,并且有了一条水到渠成式的实现路径.” 上升为国家战略的数字中国建设加速了”智慧政务“的生动实践,杭州未来科技城的「企业数据大脑」就是一个典型. ...
- [LC] 429. N-ary Tree Level Order Traversal
Given an n-ary tree, return the level order traversal of its nodes' values. Nary-Tree input serializ ...
- sqlserver 命令执行sql脚本
osql -S 主机名 -U 用户名 -P 密码 -i E:\20190723.sql
- verilog求倒数-ROM实现方法
采用线性逼近法结合32段线性查找表的方式来实现1/z的计算. 首先将1/32-1/64的定点化数据存放到ROM中,ROM中存放的是扩大了2^20 次方的数字四舍五入后的整数部分.n值越大,精度越大,误 ...
- wios设置证书登陆
设置wios为密钥登陆set service ssh 'allow-root' set service ssh 'disable-password-authentication' //禁用密码登陆 s ...
- mysql表关联问题(第三卷:外键多对多)
现在我们整理一下多对多的问题,举个例子现在一个男的可能和多个女的谈过恋爱,一个女的也可能和多个男的谈过恋爱,把他们恋爱的关系整理为数据关联表就成为了多对多的关系. 准备三张表,男人信息表,女人信息表, ...
- LG_3457_[POI2007]POW-The Flood
题目描述 Description 你手头有一张该市的地图.这张地图是边长为 m∗n 的矩形,被划分为m∗n个1∗1的小正方形.对于每个小正方形,地图上已经标注了它的海拔高度以及它是否是该市的一个组成部 ...