问题：

在实际开发过程中，会遇到上传文件的一些需求。但是使用原生的<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. 吴裕雄--天生自然 JAVA开发学习：多线程编程

    class RunnableDemo implements Runnable { private Thread t; private String threadName; RunnableDemo( ...

  2. 吴裕雄--天生自然C语言开发：排序算法

    #include <stdio.h> void bubble_sort(int arr[], int len) { int i, j, temp; ; i < len - ; i++ ...

  3. Tomcat下访问HTML页面乱码的解决方法

    问题:在 Tomcat 服务器中访问 HTML 静态页面出现中文乱码,html 页面即使 charset 设置成 UTF-8 也会是乱码,打开浏览器的开发者工具发现 response 的请求头中的 C ...

  4. 【更新中】Hotspot tracer

    Hotspot Follower 闲着没事,打算做一个爬取社会热点的项目,首先通过微信搜狗进行分析. 代码基于PYTHON import requests import json def page(s ...

  5. 牛客-富豪凯匹配串（bitset）

    题目传送门 sol1:用bitset来维护,其实感觉挺暴力的,不怎么会用bitset,借着这道题学习一下. bitset暴力维护 #include "bits/stdc++.h" ...

  6. Python--继承、封装、多态

    大概每个人在学生时代开始就使用Java了,我们一直在学习Java,但Java中总有一些概念含混不清,不论是对初级还是高级程序员都是如此.所以,这篇文章的目的就是弄清楚这些概念. 读完本文你会对这些概念 ...

  7. springboot学习笔记：6.内置tomcat启动和外部tomcat部署总结

    springboot的web项目的启动主要分为: 一.使用内置tomcat启动 启动方式: 1.IDEA中main函数启动 2.mvn springboot-run 命令 3.java -jar XX ...

  8. linux下使用过的命令总结（未整理完）

    1.常用命令不需解释 ls\cd\cp\mv\pwd\file\vi\vim\cat 2.getconf LONG_BIT 终端返回32表示操作系统32位,返回64表示操作系统64位. 3.ifcon ...

  9. inventor卸载/完美解决安装失败/如何彻底卸载清除干净inventor各种残留注册表和文件的方法

    在卸载inventor重装inventor时发现安装失败,提示是已安装inventor或安装失败.这是因为上一次卸载inventor没有清理干净,系统会误认为已经安装inventor了.有的同学是新装 ...

  10. CF-1114C-Trailing Loves (or L'oeufs?)

    题意: 输入n和m,求n!转换成m进制之后末尾有多少个0: 思路: 转换一下题意就可以看成,将n表示成x * (m ^ y),求y的最大值.^表示次方而不是异或: 这就比较好想了,将m分解质因数,对于 ...