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)網(wǎng)站的支持！
新聞熱點
疑難解答
