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)文章
JavaScript中call和apply方法的區(qū)別實例分析
這篇文章主要介紹了JavaScript中call和apply方法的區(qū)別,結(jié)合實例形式分析call和apply方法的功能、原理及相關(guān)使用操作區(qū)別,需要的朋友可以參考下2018-08-08js 執(zhí)行上下文和作用域的相關(guān)總結(jié)
這篇文章主要介紹了js 執(zhí)行上下文和作用域的相關(guān)知識總結(jié),幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2021-02-02