input type="file"使用

stonezhu 發(fā)布于2019-08-01 18:42 / 3461人閱讀

問題：

在實際開發(fā)過程中，會遇到上傳文件的一些需求。但是使用原生的在使用中存在一些問題

在未上傳文件時，顯示"no file choosen"，用戶界面不友好，不可配置

上傳同一個文件，不會觸發(fā)change事件，即使該文件做過修改

用戶如果在上傳過程中點擊了“取消”，已經(jīng)上傳的文件會被移除

解決思路

在閱讀了一些源碼之后，總結(jié)了如下的解決方案。有點偷梁換柱的意思:

將真正的隱藏，使用自定義的button通過$refs去觸發(fā)文件上傳，實現(xiàn)自定義顯示

文件上傳之后，處理完文件，將的value設(shè)置為null，這樣下次即使上傳的是同一個文件，仍然會觸發(fā)change事件

使用上述方法，點擊取消文件被移除，但是不影響頁面展示

具體實現(xiàn)





    
    
    Vue



    
        
        {{fileName}}

感想

遇到問題的時候多去看看別人是怎么寫的，借鑒一下，解決問題的同時能夠?qū)W習很多東西。

云服務(wù)器 GPU云服務(wù)器 Quote quoted quot python b&quot&quot

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/52008.html

相關(guān)文章

type=&quot;file&quot;的input框樣式修改的方法

摘要：開啟的方式很簡單，點擊開發(fā)者工具右上角的齒輪，然后在彈出的層中把這個勾打上就可以了。對于這個文件，如果是瀏覽器的粉絲，必然知道這個路徑的存在。關(guān)于type=file的input是啥？這個是啥我覺得沒必要再說了，反正大家都知道，然后在現(xiàn)在有各種手機的時代，還可以通過直接拍照的方式來上傳，反正比以前好玩多了。并且以前是只能上傳一個文件，現(xiàn)在的話，只要增加multiple屬性就可以...

littleGrow 2019-08-28 17:59 評論0 收藏0
vue導(dǎo)入處理Excel表格功能步驟實例

　　1. 前言　　本篇文章就是為大家講講前端導(dǎo)入并處理excel表格的情況，順便講講vue導(dǎo)入并處理excel數(shù)據(jù)；也總結(jié)下使用工具?！　?.vue導(dǎo)入Excel表格　　vue導(dǎo)入Excel表格主要有兩種常用的方法，一個是借助ElementUI文件上傳進行表格導(dǎo)入，另一個是自帶的input做文件上傳；以下對兩個方法做詳細介紹；　　2.1 使用ElementUI中的upload組件　　安裝Eleme...

3403771864 2022-11-29 09:16 評論0 收藏0
Python實操之各種音頻文件格式免費轉(zhuǎn)換

　　Pydub是1個根據(jù)ffmpeg的Python數(shù)字音頻處理控制模塊，封裝形式了很多ffmpeg最底層插口，因而用這個方法做歌曲格式轉(zhuǎn)化會十分方便。今日為大家介紹它歌曲格式轉(zhuǎn)化作用，基本上適用所有歌曲音頻文件格式，所需要的可以了解一下　　Pydub是1個根據(jù)ffmpeg的Python數(shù)字音頻處理控制模塊，封裝形式了很多ffmpeg最底層插口，因而用這個方法做歌曲格式轉(zhuǎn)化會十分方便，假如你閱讀文章...

89542767 2023-01-02 21:26 評論0 收藏0
js實現(xiàn)新聞輪播效果

　　如何利用JS實現(xiàn)新聞自動輪播效果，現(xiàn)在看看具體代碼：這是原生js實現(xiàn)新聞輪播效果，且附詳細注釋　　<!DOCTYPEhtml> 　　<html> 　　<head> 　　<metacharset="UTF-8"> 　　<metaname="viewport"content="width=dev...

3403771864 2022-09-21 06:37 評論0 收藏0