在網頁開發中,經常需要在頁面中顯示圖片。使用jQuery可以方便地實現選擇圖片并顯示在指定的標簽中。
// HTML代碼 <input type="file" id="imageInput"> <img src="" id="imageView"> // jQuery代碼 $(document).ready(function(){ $('#imageInput').change(function(){ var file = $(this)[0].files[0]; var reader = new FileReader(); reader.onload = function(e){ $('#imageView').attr('src', e.target.result); }; reader.readAsDataURL(file); }); });
以上代碼中,<input type="file">
標簽用于選擇文件,<img>
標簽用于顯示圖片。
當選擇文件時,change
事件觸發,jQuery獲取選擇的文件對象,并使用FileReader對象讀取文件內容。讀取完成后,將讀取結果(即圖片的base64編碼)設置為<img>
標簽的src
屬性值,這樣就可以在頁面中顯示出選中的圖片。