jQuery是一個非常流行的JavaScript庫,它的主要目的是簡化網頁上JavaScript的編寫。其中一個非常有用的功能是圖片上傳預覽,可以在用戶選擇圖片后立即預覽圖片,使頁面更加友好和交互性。
//HTML代碼//JavaScript代碼 $(function(){ $("#upload").change(function(){ var file=this.files[0]; var reader=new FileReader(); reader.readAsDataURL(file); reader.onload=function(){ $("#preview").attr("src",this.result); } }) })
上面的代碼使用jQuery監聽了一個input類型為file的元素的變化事件,用戶選擇圖片后會立即觸發這個事件。然后JavaScript會創建一個FileReader對象并讀取用戶選擇的圖片。FileReader對象有一個onload事件,可以在讀取完成后將圖片的Base64數據賦值給img元素的src屬性,從而在頁面上展示出來。
使用jQuery實現圖片上傳預覽功能非常簡單,只需要幾行代碼就可以讓頁面更加交互和友好。
上一篇jquery 商品加減算
下一篇jquery 圖片元素