欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)焦點圖輪播效果的方法詳解

    JS實現(xiàn)焦點圖輪播效果的方法詳解

    這篇文章主要介紹了JS實現(xiàn)焦點圖輪播效果的方法,結(jié)合實例形式詳細(xì)分析了JS焦點圖輪播效果的原理、實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
    2016-12-12
  • js仿小米二級菜單顯示效果

    js仿小米二級菜單顯示效果

    這篇文章主要為大家詳細(xì)介紹了js仿小米二級菜單顯示效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • JavaScript中call和apply方法的區(qū)別實例分析

    JavaScript中call和apply方法的區(qū)別實例分析

    這篇文章主要介紹了JavaScript中call和apply方法的區(qū)別,結(jié)合實例形式分析call和apply方法的功能、原理及相關(guān)使用操作區(qū)別,需要的朋友可以參考下
    2018-08-08
  • 詳解package.json版本號規(guī)則

    詳解package.json版本號規(guī)則

    這篇文章主要介紹了詳解package.json版本號規(guī)則,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • js 執(zhí)行上下文和作用域的相關(guān)總結(jié)

    js 執(zhí)行上下文和作用域的相關(guān)總結(jié)

    這篇文章主要介紹了js 執(zhí)行上下文和作用域的相關(guān)知識總結(jié),幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2021-02-02
  • JavaScript多級判定代碼優(yōu)化淺析

    JavaScript多級判定代碼優(yōu)化淺析

    這篇文章主要介紹了JavaScript多級判定代碼優(yōu)化,JavaScript用二元運算符和if拆分優(yōu)化多級判定結(jié)構(gòu),?用JavaScript邏輯運算符替換if-else結(jié)構(gòu)判定
    2023-02-02
  • javascript開發(fā)實現(xiàn)貪吃蛇游戲

    javascript開發(fā)實現(xiàn)貪吃蛇游戲

    這篇文章主要為大家詳細(xì)介紹了javascript開發(fā)實現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • SVG實現(xiàn)時鐘效果

    SVG實現(xiàn)時鐘效果

    這篇文章主要為大家詳細(xì)介紹了SVG實現(xiàn)時鐘效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • 那些項目中常見的TypeScript錯誤總結(jié)

    那些項目中常見的TypeScript錯誤總結(jié)

    這篇文章主要給大家總結(jié)介紹了一些項目中常見的TypeScript錯誤的相關(guān)資料,如果你想查看所有的錯誤信息和錯誤碼,可以瀏覽TypeScript的源代碼倉庫,當(dāng)然隨著?ts?版本的更新,官網(wǎng)也會逐漸增加更多新的類型錯誤,需要的朋友可以參考下
    2022-03-03
  • require.js中的define函數(shù)詳解

    require.js中的define函數(shù)詳解

    這篇文章主要給大家介紹了關(guān)于require.js中define函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用require.js中的define函數(shù)具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-07-07

最新評論