前端上傳多張圖片,編譯發給後端
今天分享一個找上傳多張圖片的方法,使用於網頁,移動端。
HTML頁面
<fieldset>
<legend>瀏覽圖片檔案:</legend>
<input type='file' name='fleUpload' id='fleUpload' onchange='fleUpload_PrevImageFile(this.files)' multiple='multiple'>
<ul id='ulUpload'></ul>
</fieldset>
JS頁面
<script>
function fleUpload_PrevImageFile(f){
if(typeof FileReader == 'undefined'){ alert('瀏覽器不支援') }
}
var strHTML = '';
for(var intI=0;intI< f.length;intI++){
var tmpFile = f[intI];
var reader = new FileReader();
reader.readAsDateURL(tmpFile);
reader.onload = function(e){
strHTML = strHTML+ '<span>';
strHTML = strHTML+ ' <img src=' '+e.target.result ' ' alt=''/> '
strHTML = strHTML+ '</span>'
document.getElementById('ulUpload').innerHTML = '<li>'+ strHTML +'</li>'
}
}
$(document).ready(function(){
$('.btn').click(function(){
var ulArray = $('li>span');
var imgArray= [];
for(var ind=0;ind<ulArray.length;ind++){
var img = $('li span img')[ind].src;
imgArray.push(img);
}
})
})
</script>
以上就是上傳多張圖片的例項,js部分獲取一個按鈕,html頁面沒有顯示,不要忘記新增。。