问题：

在实际开发过程中，会遇到上传文件的一些需求。但是使用原生的<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"使用的更多相关文章

  1. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  2. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  3. html中，文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  4. Android：让WebView支持<input type=”file”…>元素

    最近在做一个活动页面:用户上传一张图片进行缩放.旋转后点击下一步填写内容后生成图片! 做好后经过各种测试是没有问题的,基本没有什么明显BUG,流程都能走通,但是嵌入到APP后,问题就来了! 在IOS上 ...

  5. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  6. 上传文件 隐藏input type="file",用text显示

    <div> <span>上传文件:</span> <input type="file" id="upload_file" ...

  7. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  8. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  9. 一个漂亮的上传按钮input[type=file]

    ;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...

  10. css input[type=file] 样式美化，input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

随机推荐

  1. Linux下查找Nginx配置文件位置

    1.查看Nginx进程 命令: ps -aux | grep nginx 圈出的就是Nginx的二进制文件 2.测试Nginx配置文件 /usr/sbin/nginx -t 可以看到nginx配置文件 ...

  2. plsql中文显示问号

    1. select userenv('language') from dual 2. 复制查询的值配置系统环境变量 NLS_LANG=AMERICAN_AMERICA.ZHS16GBK 3.配置系统环 ...

  3. python爬虫和数据分析、数据挖掘

    一.python爬虫脑图: 二.python爬虫流程: 三.python数据分析简介 四.python数据预处理方法 五.python数据挖掘 六.数据探索基础

  4. Pulsar、ZooKeeper、BookKeeper 作用简述

    Pulsar:采取了存储计算分离的技术ZooKeeper 集群的作用和在 Kafka 中是一样的,都是被用来存储元数据.BookKeeper 集群则被用来存储消息数据.BookKeeper 有点儿类似 ...

  5. 推荐几个树莓派 raspbian 系统 可用的 arm docker源

    树莓派刚到手各种尝鲜,试过不少系统,最后还是回归了raspbian os 系统 root@raspberrypi:/home/pi# cat /proc/version Linux version 4 ...

  6. C语言数据转换

    1.在我们编码的时候可能一个表达式中的数字类型是不同的,所以我们的首要的工作就是要把它们转换成相同的类型,然后在进行计算.这个转换的过程就就做隐式类型转换,完全由计算机完成. 2.隐式类型转换有一定的 ...

  7. deeplearning.ai 神经网络和深度学习 week4 深层神经网络

    1. 计算深度神经网络的时候,尽量向量化数据,不要用for循环.唯一用for循环的地方是依次在每一层做计算. 2. 最常用的检查代码是否有错的方法是检查算法中矩阵的维度. 正向传播: 对于单个样本,第 ...

  8. Java IO: FileReader和FileWriter

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本章节将简要介绍FileReader和FileWriter.与FileInputStream和File ...

  9. 《hdu 4540 威威猫打地鼠》

    威威猫系列故事——打地鼠 Time Limit: 300/100 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  10. Proxmox如何进入单人维护模式(重置root密码)

    官网连接:https://pve.proxmox.com/wiki/Root_Password_Reset Root Password Reset     Contents [hide] 1Reset ...