input file上傳 圖片預(yù)覽功能實(shí)例代碼
input file上傳圖片預(yù)覽其實(shí)很簡(jiǎn)單,只是沒做過的感覺很神奇,今天我就扒下她神秘的面紗,其實(shí)原理真的很簡(jiǎn)單,下面通過一段代碼大家都明白了。
具體代碼如下所示:
<!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ù)覽,避免提交后在讀取圖片的冗余過程
以上所述是小編給大家介紹的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-12JavaScript中call和apply方法的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript中call和apply方法的區(qū)別,結(jié)合實(shí)例形式分析call和apply方法的功能、原理及相關(guān)使用操作區(qū)別,需要的朋友可以參考下2018-08-08js 執(zhí)行上下文和作用域的相關(guān)總結(jié)
這篇文章主要介紹了js 執(zhí)行上下文和作用域的相關(guān)知識(shí)總結(jié),幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2021-02-02javascript開發(fā)實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了javascript開發(fā)實(shí)現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07那些項(xiàng)目中常見的TypeScript錯(cuò)誤總結(jié)
這篇文章主要給大家總結(jié)介紹了一些項(xiàng)目中常見的TypeScript錯(cuò)誤的相關(guān)資料,如果你想查看所有的錯(cuò)誤信息和錯(cuò)誤碼,可以瀏覽TypeScript的源代碼倉(cāng)庫,當(dāng)然隨著?ts?版本的更新,官網(wǎng)也會(huì)逐漸增加更多新的類型錯(cuò)誤,需要的朋友可以參考下2022-03-03