input type="file"使用

stonezhu 發布于2019-08-01 18:42 / 3407人閱讀

問題：

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

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

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

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

解決思路

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

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

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

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

具體實現





    
    
    Vue



    
        
        {{fileName}}

感想

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

GPU云服務器云服務器 Quote quoted quot python b&quot&quot

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52008.html

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

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

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

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

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

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

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

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

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