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
随机推荐
- LeetCode No.124,125,126
No.124 MaxPathSum 二叉树中的最大路径和 题目 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定 ...
- logstash nested内嵌字段 field protobuf解码 codec 的解决办法
logstash nested内嵌字段 field protobuf解码 codec 的解决办法 主要需求 logstash-codec 下https://www.elastic.co/guide/e ...
- @echo off 批处理
一个批处理文件 @echo off ipconfig /all @pause -------------------------------- @echo off 是什么意思 就是说关闭回显@echo ...
- FPGA底层的时钟布线以及内部layout
https://wenku.baidu.com/view/441549fef111f18582d05a70.html 全局时钟是最简单的最可预测的时钟,时钟方案:有专用的时钟输入(提供最短的始终输出延 ...
- [LC] 14. Longest Common Prefix
Write a function to find the longest common prefix string amongst an array of strings. If there is n ...
- 吴裕雄--天生自然Android开发学习:1.2 开发环境搭建
现在主流的Android开发环境有: ①Eclipse + ADT + SDK ②Android Studio + SDK ③IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的E ...
- Oracle 10G 服务端的升级
第一步:备份 rman target / backup full database plus archivelog; 第二步:升级 解压升级包到soft目录下,修改所有者 chown -R oracl ...
- vue面试总结
https://www.kancloud.cn/hanxuming/vue-iq/728305 https://segmentfault.com/a/1190000016351284 https:// ...
- 吴裕雄--天生自然python学习笔记:Python3 网络编程
Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的全部方法. 高级别的网络 ...
- vue-cli 项目结构介绍
感谢:https://www.jianshu.com/p/7006a663fb9f 总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关 ...