在網頁中,經常需要使用圖片來豐富頁面的內容。而現在,隨著移動端的普及,我們需要更加方便快捷地選擇并上傳圖片。這時,jQuery就能夠提供很好的幫助。
jQuery是一個快速、小巧且功能豐富的JavaScript庫。它使HTML文檔遍歷、事件處理、動畫效果、Ajax交互等變得更加簡潔、統一和跨瀏覽器兼容。
下面是一個jQuery選擇相冊圖片上傳的示例:
// HTML結構 <form enctype="multipart/form-data" method="post" action=""> <input type="file" name="pic" id="pic" accept="image/*" style="display:none;" /> <img id="preview" src="" style="display:none;" /> <input type="button" value="選擇圖片" onclick="$('#pic').click();" /> <input type="submit" value="上傳" /> </form> // jQuery代碼 $(function(){ $('#pic').on('change', function(){ var file = this.files[0]; if (file.type.indexOf('image/') === -1) { alert('請選擇圖片文件!'); return; } var reader = new FileReader(); reader.onload = function(e) { $('#preview').attr('src', e.target.result).show(); }; reader.readAsDataURL(file); }); });
在這個示例中,我們先定義了一個表單,其中包含了一個文件上傳控件(<input type="file">
)、一個圖片預覽控件(<img>
)和一個上傳按鈕(<input type="submit">
)。
接著,在jQuery代碼中,我們給文件上傳控件綁定了一個change
事件,當用戶選擇了圖片文件后,便會觸發該事件。在事件處理程序中,我們首先判斷所選文件是否是圖片文件。如果不是,便彈出提示框并返回。否則,我們使用FileReader
對象來讀取圖片文件,將其轉換為Data URL格式,并將其賦給圖片預覽控件的src
屬性。最后,將預覽控件顯示出來。
運行該示例后,用戶點擊“選擇圖片”按鈕就能夠直接打開相冊,選擇圖片并實時預覽。當用戶點擊“上傳”按鈕時,表單會自動提交并上傳所選圖片。