實現input提交文件選中多個文件，同時在頁面中預覽

HTML 科技 恆星網絡 恆星網絡 2017-09-02

選中多個文件同時在頁面中預覽測試用例

主要用到的是FileReader類型，以及讀取文件的兩個方法，和一個屬性，和三個事件即如下：

實現input提交文件選中多個文件，同時在頁面中預覽

實例展示：

html:

實現input提交文件選中多個文件，同時在頁面中預覽

js代碼：

實現input提交文件選中多個文件，同時在頁面中預覽

實現input提交文件選中多個文件，同時在頁面中預覽

效果：

實現input提交文件選中多個文件，同時在頁面中預覽

相關推薦

「Java學習」Java基礎鞏固之Java實現文件上傳
「Java學習」Java基礎鞏固之Java實現文件上傳
對於文件上傳，瀏覽器在上傳的過程中是將文件以流的形式提交到服務器端的，如果直接使用Servlet獲取上傳文件的輸入流然後再解析裡面的請求參數是比較麻煩，所...
Java Apache JSP HTML 瀏覽器 2019-07-13
隱藏在Firefox中長達17年的文件竊取漏洞？
隱藏在Firefox中長達17年的文件竊取漏洞？
只要用Firefox打開一個攻擊者特製的HTML文件，就能讓攻擊者竊取到存儲在受害者計算機上的敏感文件。最近，安全專家Barak Tawily提出了這個隱...
Firefox HTML Linux 瀏覽器 Scheme Mozilla 信息安全 操作系統 搜索引擎 2019-07-06
Linux中一切皆文件是什麼意思
Linux中一切皆文件是什麼意思
談一談Linux中一切皆文件1、Linux中所有內容都是以文件的形式保存和管理，即：一切皆文件。普通文件是文件。目錄（在win下稱為文件夾）是文件。硬件設...
Linux Windows Vim 硬件 HTML MP4 2019-04-21
獲取input file選中的圖片，並在一個div的img裡面賦值實現預覽
獲取input file選中的圖片，並在一個div的img裡面賦值實現預覽
原文：http://www.cnblogs.com/xiongzaiqiren/p/6495240.html一，基本原理通過表單的input type="...
編程語言 jQuery JavaScript HTML 奔跑中的蝸牛 2017-10-29
只需簡單幾步，PHP輕鬆實現頁面靜態化
只需簡單幾步，PHP輕鬆實現頁面靜態化
靜態化, 瀏覽器請求的直接是一個靜態的html頁面. 而不是PHP程序. 優化的常見技術這裡簡單的介紹的操作是在後臺添加一個生成前臺首頁的功能在後臺生成,...
編程語言 PHP HTML 技術 鵬博網客 2017-09-13
Linux中的 /etc/passwd 文件
Linux中的 /etc/passwd 文件
/etc/passwd在Linux（UNIX）系統中有一個對於用戶管理至關重要的系統文件，那就是 /etc/passwd 文件，這個文件也被稱為用戶賬戶數...
Linux Bash UNIX 科技 Linux系統學習 2017-09-12
實現瀏覽器中禁止雙擊選中文字
實現瀏覽器中禁止雙擊選中文字
在很多瀏覽器下，呈現在網頁中的字體，當鼠標雙擊字體時候，系統會默認識別你雙擊的是詞組還是單詞，然後就選中。那麼要如何才能禁止瀏覽器中的該操作呢，下面請看看...
Firefox 鼠標 科技 恆星網絡 2017-09-07
網頁中選中多個文件，同時在頁面中預覽
網頁中選中多個文件，同時在頁面中預覽
選中多個文件同時在頁面中預覽測試用例主要用到的是FileReader類型，以及讀取文件的兩個方法，和一個屬性，和三個事件即如下：實例展示：html:js代...
HTML 技術 恆星網絡 2017-09-03
web前端開發中的JS選項卡/頁籤/tab的實現方法
web前端開發中的JS選項卡/頁籤/tab的實現方法
歡迎關注！Tab(Module-Tabs)Tab(Module-Tabs)，也稱選項卡、頁籤。是指將多個分類內容放置在同一個佈局塊內，但每次只有一個分類的...
編程語言 HTML JavaScript 鼠標 一鍋前端匯 2017-08-31
win7實現多用戶同時遠程登錄，你get了嗎？
win7實現多用戶同時遠程登錄，你get了嗎？
有時候服務器是Win7系統的時候，遠程登錄桌面時，即使登錄的是不同的管理賬號，還是會把遠程登錄的人給記下來。即不同的賬號只能同時存在一個會話窗。本文教大家...
Windows 7 防火牆 科技 Sophon 2017-08-28
一行命令就能實現csv文件可視化？
一行命令就能實現csv文件可視化？
推薦一個小工具：csvtotable。它是一個命令行工具，可以把csv文件轉換為可以搜索和排序的html表格。 mac終端下一行命令快速安裝：sudo p...
可視化 HTML GitHub Mac 碎片時間 2017-08-26
Linux文件系統的實現
Linux文件系統的實現
Linux文件管理從用戶的層面介紹了Linux管理文件的方式。Linux有一個樹狀結構來組織文件。樹的頂端為根目錄(/)，節點為目錄，而末端的葉子為包含數...
Linux 科技 Java淺析 2017-08-26
不帶插件，自己寫js，實現批量上傳文件及進度顯示
不帶插件，自己寫js，實現批量上傳文件及進度顯示
今天接受項目中要完成文件批量上傳文件而且還要顯示上傳進度，一開始覺得這個應該不是很麻煩，當我在做的時候遇到了很多問題，很頭疼啊。不過看了別人寫的代碼，自己...
編程語言 Java HTML CSS 2017-06-27
Servlet 實現文件上傳
Servlet 實現文件上傳
Servlet 實現文件上傳所謂文件上傳就是將本地的文件發送到服務器中保存。例如我們向百度網盤中上傳本地的資源或者我們將寫好的博客上傳到服務器等等就是典型...
編程語言 Tomcat Java HTML 2017-06-23
教你一招解決電腦中CAD文件打不開的問題，看完你就能自己動手操作
教你一招解決電腦中CAD文件打不開的問題，看完你就能自己動手操作
Dwg文件是CAD文件格式之一，如果你像平常查看圖片一樣雙擊dwg文件的話，你會發現根本無法打開它。這說明你電腦上沒有安裝AutoCAD這樣的CAD圖紙軟...
軟件 AutoCAD 設計師 科技 2017-06-17
教大家利用BAT文件實現程序自我刪除（附編程代碼）
教大家利用BAT文件實現程序自我刪除（附編程代碼）
最近聽很多網友說，他們給人做程序的時候遇到了騙子，程序發給對方卻把他拉黑，尾款也打了水漂！針對這樣的情況，大家可以嘗試下以下代碼！1.我們以VB6.0為例...
軟件 科技 2017-06-16
重裝系統再也不用擔心桌面文件丟失了
重裝系統再也不用擔心桌面文件丟失了
好多小夥伴喜歡把平時常用的文件都放在桌面，但是桌面文件夾是在C盤目錄下的，時間長了桌面的文件會很多，這樣就導致了系統開機越來越慢，甚至死機。同時，桌面文件...
惠普 科技 2017-06-15
OneDrive On-Demand 文件同步測試版推出
OneDrive On-Demand 文件同步測試版推出
2017 年 6 月 14 日, 6:49 上午 - Picturepan2 微軟在 Build 2017 上宣佈了新的 OneDrive On-Dema...
微軟 Windows 科技 2017-06-15
WIN10系統“桌面”位置移動到D盤（喜歡把文件放在桌面的必看）
WIN10系統“桌面”位置移動到D盤（喜歡把文件放在桌面的必看）
喜歡點個關注吧！你的關注就是我的動力。 後期還會不斷更新，為大家提供更多的內容，也歡迎大家補充有許多用戶都喜歡把文件放在Windows桌面上，這樣查找和使...
軟件 Windows 10 科技 2017-06-14
從JS文件中發現「認證繞過」漏洞
從JS文件中發現「認證繞過」漏洞
翻譯：h4d35預估稿費：120RMB投稿方式：發送郵件至linwei#360.cn，或登陸網頁版在線投稿前言本篇文章主要介紹了在一次漏洞懸賞項目中如何利...
Dashboard HTML SQL 科技 2017-06-09
推薦中...