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)文章
這篇文章主要介紹了JS實現(xiàn)焦點圖輪播效果的方法,結(jié)合實例形式詳細分析了JS焦點圖輪播效果的原理、實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了js仿小米二級菜單顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
JavaScript中call和apply方法的區(qū)別實例分析
這篇文章主要介紹了JavaScript中call和apply方法的區(qū)別,結(jié)合實例形式分析call和apply方法的功能、原理及相關(guān)使用操作區(qū)別,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了詳解package.json版本號規(guī)則，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
js 執(zhí)行上下文和作用域的相關(guān)總結(jié)
這篇文章主要介紹了js 執(zhí)行上下文和作用域的相關(guān)知識總結(jié)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了JavaScript多級判定代碼優(yōu)化，JavaScript用二元運算符和if拆分優(yōu)化多級判定結(jié)構(gòu),?用JavaScript邏輯運算符替換if-else結(jié)構(gòu)判定2023-02-02
這篇文章主要為大家詳細介紹了javascript開發(fā)實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家詳細介紹了SVG實現(xiàn)時鐘效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要給大家總結(jié)介紹了一些項目中常見的TypeScript錯誤的相關(guān)資料,如果你想查看所有的錯誤信息和錯誤碼,可以瀏覽TypeScript的源代碼倉庫,當(dāng)然隨著?ts?版本的更新,官網(wǎng)也會逐漸增加更多新的類型錯誤,需要的朋友可以參考下2022-03-03
這篇文章主要給大家介紹了關(guān)于require.js中define函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用require.js中的define函數(shù)具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07