input file上傳 圖片預(yù)覽功能實例代碼
更新時間：2016年10月25日 11:37:01 作者：痞子蔡蔡0
input file上傳圖片預(yù)覽其實很簡單。今天小編就通過本文給大家介紹input file上傳 圖片預(yù)覽功能的實現(xiàn)代碼，比較簡單，對input file 上傳預(yù)覽功能感興趣的朋友參考下吧
input file上傳圖片預(yù)覽其實很簡單，只是沒做過的感覺很神奇，今天我就扒下她神秘的面紗，其實原理真的很簡單，下面通過一段代碼大家都明白了。
具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" multiple id="inputs"/> //multiple(多文件上傳)
<div id='dd'></div>
<script>
$(document).ready(function () {
$("#inputs").change(function () {
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
});
function reads(fil){
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function()
{
document.getElementById("dd").innerHTML += "<img src='"+reader.result+"'>";
};
}
</script>
</body>
<html>
實現(xiàn)上傳圖片直接預(yù)覽，避免提交后在讀取圖片的冗余過程
以上所述是小編給大家介紹的input file上傳 圖片預(yù)覽功能實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
c#和Javascript操作同一json對象的實現(xiàn)代碼
剛開始學(xué)Javascript，接觸到j(luò)son對象，json可以看作是用于客戶端數(shù)據(jù)實體對象的載體。json對象一般都是通過ajax方式傳送給服務(wù)層2012-01-01
展開運算符(spread operator)允許一個表達式在某處展開,下面這篇文章主要給大家介紹了關(guān)于如何通過一文教會你如何在JavaScript中使用展開運算符的相關(guān)資料,需要的朋友可以參考下2022-10-10
javascript 小數(shù)乘法結(jié)果錯誤的處理方法
下面小編就為大家?guī)硪黄猨avascript 小數(shù)乘法結(jié)果錯誤的處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了微信小程序渲染性能調(diào)優(yōu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-07-07
foreach和map都是JavaScript中數(shù)組的常用方法,它們都可以對數(shù)組中的每個元素執(zhí)行一個函數(shù),但是它們有一些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map詳細講解的相關(guān)資料,需要的朋友可以參考下2023-11-11
Bootstrap每天必學(xué)之折疊，本文向大家講解了Bootstrap折疊操作，感興趣的小伙伴們可以參考一下2016-04-04
Ajax，UTF-8還是GB2312 eval 還是execScript
討厭的東西。 關(guān)于Ajax獲取HTML內(nèi)容編碼，與JavaScript載入腳本的動態(tài)執(zhí)行問題。2008-11-11
js圖片上傳預(yù)覽2009-06-06
js實現(xiàn)的類marquee水平循環(huán)滾動
marquee （水平）循環(huán)滾動的js實現(xiàn) ,需要的朋友可以參考下。2010-03-03
最近在學(xué)習(xí)javascript中遇到了一些困難，比如冒泡和捕獲，很多次被提到，但又不知究竟應(yīng)用在何處。找到了一些好文章解惑，在這里分享給大家。2015-05-05