问题：

在实际开发过程中，会遇到上传文件的一些需求。但是使用原生的<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. docker容器中安装中文字体

    在项目中用到pdf导出功能,需要安装中文字体,项目使用docker部署,为了方便决定在将字体安装在镜像中. 1.在dockerfile文件中添加字体copy语句(本次用是的宋体,字体源文件放在dock ...

  2. 正则表达式grep学习(一)

    文本处理三剑客grep       文本过滤sed       流过滤awk       格式处理 正则表达式就是一些特殊字符组成的模式,赋予了他特定的含义 在大多数程序里,正则表达式都被置于两个正斜 ...

  3. QTP 表格的导入导出异常信息 笔记

    0 环境 系统环境:win7 1 操作 1.1 前言 与异常遍历结合 需要表格记录下来(读写) 代码大概跑了一下 若细节有错 请自行更改 1.2 导出 systemutil.Run "D:\ ...

  4. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  5. 3dmax2019卸载/安装失败/如何彻底卸载清除干净3dmax2019注册表和文件的方法

    3dmax2019提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2019失败提示3dmax2019安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  6. Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization.FAILED

    1.service network stop 2./etc/sysconfig/network-scripts目录下,删除想要删除的网卡配置,我要删除eth1,所以rm -rf ifcfg-eth1, ...

  7. 1040 有几个PAT (25 分)

    题目:1040 有几个PAT (25 分) 思路: 是个规律题,只要找到规律就有思路,那代码基本就有了,就是怎么实现比较好和是否简洁的问题. 很明显:A是分水岭,A前面有多少个P和A后面有多少个T知道 ...

  8. IO流文件拷贝

    目录 IO流文件拷贝 前言 字节流(使用FileInputStream和FileOutputStream读取每一个字节...) 字节流(使用FileInputStream和FileOutputStre ...

  9. Jquery和js实现cookie操作手机浮层广告；附加：js获取、添加、删除cookie

    1.jquery cookie包实现手机上的浮层广告 <span style="font-size:18px;">$(document).ready(function( ...

  10. 很全很全的 JavaScript 模块讲解

    模块通常是指编程语言所提供的代码组织机制,利用此机制可将程序拆解为独立且通用的代码单元.所谓模块化主要是解决代码分割.作用域隔离.模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面. ...