input file上傳 圖片預(yù)覽功能實(shí)例代碼
更新時(shí)間：2016年10月25日 11:37:01 作者：痞子蔡蔡0
input file上傳圖片預(yù)覽其實(shí)很簡(jiǎn)單。今天小編就通過(guò)本文給大家介紹input file上傳 圖片預(yù)覽功能的實(shí)現(xiàn)代碼，比較簡(jiǎn)單，對(duì)input file 上傳預(yù)覽功能感興趣的朋友參考下吧
input file上傳圖片預(yù)覽其實(shí)很簡(jiǎn)單，只是沒做過(guò)的感覺很神奇，今天我就扒下她神秘的面紗，其實(shí)原理真的很簡(jiǎn)單，下面通過(guò)一段代碼大家都明白了。
具體代碼如下所示：
<!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>
實(shí)現(xiàn)上傳圖片直接預(yù)覽，避免提交后在讀取圖片的冗余過(guò)程
以上所述是小編給大家介紹的input file上傳 圖片預(yù)覽功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JS實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了JS焦點(diǎn)圖輪播效果的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了js仿小米二級(jí)菜單顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
JavaScript中call和apply方法的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript中call和apply方法的區(qū)別,結(jié)合實(shí)例形式分析call和apply方法的功能、原理及相關(guān)使用操作區(qū)別,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了詳解package.json版本號(hào)規(guī)則，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
js 執(zhí)行上下文和作用域的相關(guān)總結(jié)
這篇文章主要介紹了js 執(zhí)行上下文和作用域的相關(guān)知識(shí)總結(jié)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了JavaScript多級(jí)判定代碼優(yōu)化，JavaScript用二元運(yùn)算符和if拆分優(yōu)化多級(jí)判定結(jié)構(gòu),?用JavaScript邏輯運(yùn)算符替換if-else結(jié)構(gòu)判定2023-02-02
javascript開發(fā)實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了javascript開發(fā)實(shí)現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家詳細(xì)介紹了SVG實(shí)現(xiàn)時(shí)鐘效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
那些項(xiàng)目中常見的TypeScript錯(cuò)誤總結(jié)
這篇文章主要給大家總結(jié)介紹了一些項(xiàng)目中常見的TypeScript錯(cuò)誤的相關(guān)資料,如果你想查看所有的錯(cuò)誤信息和錯(cuò)誤碼,可以瀏覽TypeScript的源代碼倉(cāng)庫(kù),當(dāng)然隨著?ts?版本的更新,官網(wǎng)也會(huì)逐漸增加更多新的類型錯(cuò)誤,需要的朋友可以參考下2022-03-03
這篇文章主要給大家介紹了關(guān)于require.js中define函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用require.js中的define函數(shù)具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07