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
随机推荐
- 004.前端开发知识，前端基础CSS（2020-01-09）
一.CSS字体样式属性 1.font-size:字号大小 2.font-family:字体 font-family属性用于设置字体.网页中常用的字体有宋体.微软雅黑.黑体等. * { /*font-f ...
- LGOJ4449 于神之怒加强版
Description link 给定\(n\),\(m\),\(k\),计算 \[\sum_ {i=1}^n \sum^m_{j=1} gcd(i,j)^k \space mod \space 10 ...
- RAID和LVM
EXT家族支持度最广,但创建文件系统慢修复慢存储容量有限 XFS同样是日志文件系统:容量大,支持大存储高性能,创建/修复文件系统快inode与block都是系统需要用到时,才动态配置产生 基本分区(静 ...
- ORs-2-Genome Coverage and the OR Subgenome
Genome Coverage and the OR Subgenome 因为: 爬行类动物的的gene numbers比较大,而birds 的 gene numbers 处于(182-688) 其中 ...
- vue实现tab选项卡切换
上代码: <template> <div class="push"> //点击按钮 <div class="tab&qu ...
- Excel-DNA项目只用1个文件实现Ribbon CustomUI和CustomTaskpane定制【C#版】
Excel-DNA项目中的自定义功能区和自定义任务窗格需要用到各种命名空间.添加所需文件,才能实现.后来我发现可以把所有代码都写在Class1.cs这个默认文件中. 大家可以在Visual Studi ...
- Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.212.el6_10.3.x86_64
在使用gdb调试时出现Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.212.el6_10.3.x86_64提示 解决 ...
- every|each|the用于姓氏的复数形式|comrades-in-arms|clothes are|word|steel|affect|effect
________ man in the crowd raised his hand. A. All B. Each C. Every D. Both 题目解析 考查代词的用法.此句意思是:人群 ...
- NIO详解
目录 NIO 前言 IO与NIO的区别 Buffer(缓冲区) Channel(通道) Charset(字符集) NIO遍历文件 NIO 前言 NIO即New IO,这个库是在JDK1.4中才引入的. ...
- windows版 Sublime Text 2 快捷键
ucifr 翻译了 Sublime Text 2 快捷键 Mac版,用win系统的哥们表示伤不起啊~ 今天把windows版 Sublime Text 2 快捷键 整理了出来,与众兄弟们分享: Ctr ...