问题：

在实际开发过程中，会遇到上传文件的一些需求。但是使用原生的<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. 吴裕雄--天生自然python机器学习：朴素贝叶斯算法

    分类器有时会产生错误结果,这时可以要求分类器给出一个最优的类别猜测结果,同 时给出这个猜测的概率估计值. 概率论是许多机器学习算法的基础 在计算 特征值取某个值的概率时涉及了一些概率知识,在那里我们先 ...

  2. PHP验证电子邮件-密码保护和随机密码

    验证邮箱: function isValidEmail($email){ return eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a ...

  3. day27-控制台输出彩色文字

    格式:\033[显示方式;前景色;背景色m 说明:显示方式           意义-------------------------  0             终端默认设置  1         ...

  4. 传统的Servlet在spring boot中怎么实现的?

    传统的Servlet在spring boot中怎么实现的? 本文主要内容: 1:springboot一些介绍 2:传统的servlete项目在spring boot项目中怎么实现的?web.xml.u ...

  5. webpack4的迁移

    引用于https://www.jianshu.com/p/7ae252f27f09 感觉是突然之间,webpack4的消息就满天飞了,听说打包速度提高了很多,还有最大的噱头是实现了零配置,leader ...

  6. 1076 Wifi密码 (15 分)

    题目:传送门 下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己 ...

  7. 数据库引擎MyiSAM和InnoDB区别

    数据库操作原理归根到底还是对文件操作,只不过是数据库文件. MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三 ...

  8. OpenCV 霍夫线变换

    #include "opencv2/highgui/highgui.hpp" #include "opencv2/imgproc/imgproc.hpp" #i ...

  9. ZOJ-4089-Little Sub and Isomorphism Sequences

    给定你个数组,以及一些单点修改,以及询问,每次询问需要求得,最长的字串长度,它在其他位置存在同构. 当存在两个不相交的区间同构时,如: 1.2.…….n -1.n.n + 1.…….m.m + 1.m ...

  10. 整合SSM遇到的错误,数据库连接失败问题集合

    Could not get JDBC Connection; nested exception is java.sql.SQLException: Connections could not be a ...