jQuery是一種廣泛應用于JavaScript開發的快速、小巧并且功能豐富的JavaScript庫。在開發Web應用程序中,經常需要使用圖片,并且回顯圖片也是非常重要的操作。本文將介紹如何使用jQuery選擇圖片并回顯。
首先,需要在HTML中創建一些元素用于顯示圖片和上傳圖片的按鈕:
<img id="preview" src="" alt="選擇圖片"> <input type="file" id="upload" name="file">
在JavaScript中,可以使用jQuery的事件監聽器來監聽input元素的change事件。當選擇了新的文件時,change事件會被觸發。我們可以獲取到這個文件并使用FileReader將它轉換成DataURL:
$("#upload").on("change", function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function() { $("#preview").attr("src", reader.result); } reader.readAsDataURL(file); });
代碼中,首先獲取到選擇的文件。然后使用FileReader的實例來讀取這個文件,并轉換成DataURL。最后,將這個DataURL賦值給img元素的src屬性,以顯示這張圖片。
至此,我們已經成功實現了使用jQuery選擇圖片并回顯的功能。這個功能可以用于多種場景,比如頭像上傳、圖片裁剪等。
上一篇jquery選擇類用什么
下一篇jQuery選擇器小結