jQuery是一款非常優(yōu)秀的JavaScript庫(kù),其簡(jiǎn)化了JavaScript操作DOM、事件處理、AJAX請(qǐng)求等操作,同時(shí)也提供了許多強(qiáng)大的插件和工具。在許多網(wǎng)站中,用戶需要上傳圖片,并實(shí)現(xiàn)預(yù)覽效果,使用jQuery可以輕松實(shí)現(xiàn)。
以下代碼使用jQuery實(shí)現(xiàn)圖片預(yù)覽的功能:
$(function() { // 選擇圖片后執(zhí)行 $('#file').change(function() { // 獲取文件對(duì)象 var file = this.files[0]; // 判斷文件類(lèi)型是否是圖片 if(!/image\/\w+/.test(file.type)) { alert('請(qǐng)選擇圖片文件!'); return false; } // 創(chuàng)建一個(gè)FileReader對(duì)象,并讀取文件 var reader = new FileReader(); reader.readAsDataURL(file); // 文件讀取完成后執(zhí)行 reader.onload = function(e) { // 獲取圖片base64數(shù)據(jù),并生成預(yù)覽 $('#preview').attr('src', this.result); } }); });
以上代碼實(shí)現(xiàn)了選擇圖片后讀取文件,并使用FileReader對(duì)象獲取文件的base64編碼,然后將編碼賦值給標(biāo)簽的src屬性即可實(shí)現(xiàn)圖片預(yù)覽效果。
下一篇jquery 飄窗