色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery選擇本地多圖片

盧秋海1年前6瀏覽0評論

隨著移動互聯網的普及,網站和移動應用的用戶體驗越來越重要,其中圖片的使用也越來越頻繁。而有些需求需要用戶在本地選擇多張圖片上傳,這時候使用jquery來輔助實現會是一個好的選擇。

首先,我們需要一個選擇文件的按鈕和一個展示已選擇圖片的容器:

<span><input type="file" id="fileChooser" multiple /></span>
<span><div id="imageContainer"></div></span>

接著,我們通過jquery監聽選擇文件按鈕的change事件,獲取用戶選擇的文件信息并展示:

$(function() {
$('#fileChooser').change(function() {
// 獲取用戶選擇的文件信息
var files = this.files;
// 遍歷文件列表,展示圖片
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 只顯示圖片類型文件
if (!file.type.match('image.*')) {
continue;
}
// 使用FileReader對象讀取文件數據
var reader = new FileReader();
reader.onload = function(event) {
// 新建一個圖片標簽,展示已選擇的圖片
var img = document.createElement('img');
img.src = event.target.result;
$('#imageContainer').append(img);
}
reader.readAsDataURL(file);
}
})
});

以上代碼通過FileReader對象讀取文件數據并轉化為base64格式的字符串,再將其賦值給新建的img標簽的src屬性即可展示。通過這種方式,用戶不僅可以選擇多張圖片上傳,還可以及時預覽已選擇的圖片。

需要注意的是,現代瀏覽器已經支持HTML5的File API,但是在一些老舊的瀏覽器中可能不支持,所以在開發中需要特別注意兼容性的問題。