Jquery是一款流行的Javascript庫,它為Javascript的開發帶來了許多便利。其中之一就是在輸入框中添加圖片功能的實現。下面將介紹如何使用jquery在輸入框中添加圖片。
$(document).ready(function(){ //為圖片添加點擊事件 $('#imgUpload').on('click', function(){ //創建input元素 var input = document.createElement('input'); //設置input元素類型為file input.type = 'file'; //為input元素添加屬性,指定文件選擇框的id和name input.setAttribute('id', 'uploadInput'); input.setAttribute('name', 'uploadInput'); //隱藏input元素 input.setAttribute('style', 'display:none;'); //將input元素添加到body后面 $('body').append(input); //模擬input元素點擊事件 $('#uploadInput').click(); //為input元素添加change事件 $('#uploadInput').on('change', function(){ //獲取文件 var file = this.files[0]; //創建FileReader對象 var reader = new FileReader(); //當讀取文件結束時執行回調函數 reader.onload = function(){ //創建img元素 var img = document.createElement('img'); //設置img元素的src屬性 img.src = reader.result; //將img元素添加到輸入框后面 $('#input').after(img); }; //讀取文件 reader.readAsDataURL(file); }); }); });
以上代碼中,通過創建一個input元素模擬選擇文件的過程,并將input元素隱藏。然后監聽input元素的change事件,在文件讀取完成后生成一個img元素,并將其添加到輸入框后面。
通過以上步驟,我們就可以在輸入框中添加圖片了。希望本文能夠對您有所幫助。