问题：

在实际开发过程中，会遇到上传文件的一些需求。但是使用原生的<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. 第二类错误|检验统计量|左偏|右偏|P值

    6 第二类错误在H0中的假设值差别越大时增大? 不对,第二类错误在H0中的假设值差别越大时变小. 检验统计量有哪些? 根据假设内容确定是左偏还是右偏? P值是在原假设为真的条件下,检验统计量大于或等于 ...

  2. Java发送邮箱

    smtp与pop3 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议 SMTP 服务器就是遵循 SMTP 协议的发送邮件服务器 POP3是Post Office ...

  3. file_get_contents为何无法采集某些压缩过的网站

    有些网站直接用file_get_contents就能采集, 但是有些不行. 于是可以在网址前加入 'compress.zlib://‘ $url = 'compress.zlib://' . 'htt ...

  4. Logarithmic transformation|Data transfer|MASS|Box-Cox

    数据转换(Data transfer) 方差分析的前提是方差齐性,可以使用transfer改变方差使得方差变齐.不正态和outlier. Logarithmic transformation使方差聚合 ...

  5. DB2数据库多行一列转换成 一行一列

    在db2中遇到多行一列转为一行一列的需求时,用db2函数 LISTAGG可以实现该功能.语法如下: SELECT   [分组的字段 ] , LISTAGG([需要聚合的字段名], ',')   FRO ...

  6. Django环境的搭建以及最简示例

    一.环境的搭建 先安装pip yum install python-pip 安装失败: 安装epel扩展源 yum install epel-release 在安装pip 再利用pip安装django ...

  7. Oracle之函数中使用游标

    create or replace function getcustprodinstaddr(in_CustId in number,in_area_code in number) return va ...

  8. 在腾讯云centos7.2上安装配置Node.js记录

    应为爱好前端所以打算在腾讯云服务器上安装JavaScript引擎Node.js,下面是安装步骤: 安装准备: 下载node.js的.tar.xz安装包:https://nodejs.org/dist/ ...

  9. 关于sql拼接的知识点 where1=1

    String sql="select * from tab_route where 1 = 1 "; 这样不会报错,而且可以根据情况,再去拼接sql 可以使用if(){}else{ ...

  10. ConxtMenu高级用法

    ##背景我们经常在列表的页面中,点击列表中的行,一般进入详情页面,长按列表中一行,会弹出一个菜单,包含了对某一行的操作(编辑.删除等等),也知道通常的用法: 0x01. 在Activity中注册需要上 ...