在網頁中,經常會需要選擇一張或多張圖片并在頁面中顯示出來。使用jQuery輕松實現這個功能。
首先需要在HTML中添加一個input標簽,用于上傳圖片:
<input type="file" id="uploadFile" accept="image/*">
然后使用jQuery獲取input標簽,并監聽其change事件,獲取選擇的圖片地址:
$(document).ready(function() { $('#uploadFile').on('change',function(){ var imgPath = $(this).val(); }); });
接下來,需要通過新建一個Image對象來加載圖片,然后將其添加到頁面中:
$(document).ready(function() { $('#uploadFile').on('change',function(){ var imgPath = $(this).val(); if(imgPath != ''){ var img = new Image(); img.src = imgPath; $('body').append(img); } }); });
完成以上代碼后,運行頁面,在上傳圖片后,選擇的圖片將會被顯示在頁面中。