生活随笔
收集整理的這篇文章主要介紹了
js前端实现多图图片上传预览的两个方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、將圖片轉成icon碼的實現方式,手動多個
效果圖：
代碼片段：
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多圖上傳測試</title>
<script type="text/javascript">
//圖片預覽功能 divViewIdNum 圖片的id號
function picViewImagesLook(file,divViewIdNum)
{var viewMaxW = 200; var viewMaxH = 200;var div = document.getElementById('look_view'+divViewIdNum);if (file.files && file.files[0]){div.innerHTML ='<img id=look_img_tag_id'+divViewIdNum+'>';var img = document.getElementById('look_img_tag_id'+divViewIdNum+'');img.onload = function(){var rect = picViewZoom(viewMaxW, viewMaxH, img.offsetWidth, img.offsetHeight);img.width = rect.width;img.height = rect.height;//img.style.marginLeft = rect.left+'px';img.style.marginTop = rect.top+'px';}var reader = new FileReader();reader.onload = function(evt){img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);}else {var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';file.select();var src = document.selection.createRange().text;div.innerHTML = '<img id=look_img_tag_id'+divViewIdNum+'>';var img = document.getElementById('imghead2');img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;var rect = picViewZoom(viewMaxW, viewMaxH, img.offsetWidth, img.offsetHeight);status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);div.innerHTML = "<div id=look_div_tag_id"+divViewIdNum+" style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";}
}
function picViewZoom( maxWidth, maxHeight, width, height ){var param = {top:0, left:0, width:width, height:height};if( width>maxWidth || height>maxHeight ){rateWidth = width / maxWidth;rateHeight = height / maxHeight;if( rateWidth > rateHeight ){param.width = maxWidth;param.height = Math.round(height / rateWidth);}else{param.width = Math.round(width / rateHeight);param.height = maxHeight;}}param.left = Math.round((maxWidth - param.width) / 2);param.top = Math.round((maxHeight - param.height) / 2);return param;
}
</script>
</head>
<body>圖片一
<div><div><input name="pic_file" onchange="picViewImagesLook(this,5)" type="file"/></div><div id="look_view5" ><img src="" alt="" height="200" width="200" style="display:none;"/></div>
</div>圖片二
<div><div><input name="pic_file" onchange="picViewImagesLook(this,6)" type="file"/></div><div id="look_view6" ><img src="" alt="" height="200" width="200" style="display:none;"/></div>
</div></body>
</html>
二、使用js的另一種方法一次選中多個圖片預覽展示
效果圖：
代碼片段：
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多圖上傳測試</title>
<script type="text/javascript">var all_picW = "100px";//預覽的寬度var all_picH = "100px";//預覽的高度function multiImagePreview(avalue) {var upMultilImagesObj = document.getElementById("upMultilImages");var picViewsBox = document.getElementById("picViewsBox");picViewsBox.innerHTML = "";var fileList = upMultilImagesObj.files;for (var i = 0; i < fileList.length; i++) { picViewsBox.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";var picjPreviewInfo = document.getElementById("img"+i); if (upMultilImagesObj.files && upMultilImagesObj.files[i]) {//火狐picjPreviewInfo.style.display = 'block';picjPreviewInfo.style.width = all_picW;picjPreviewInfo.style.height = all_picH;//picjPreviewInfo.src = upMultilImagesObj.files[0].getAsDataURL();//火狐7+版本,用不了getAsDataURL()picjPreviewInfo.src = window.URL.createObjectURL(upMultilImagesObj.files[i]);} else {//IEupMultilImagesObj.select();var picTagSrc = document.selection.createRange().text;alert(picTagSrc);var localImagId = document.getElementById("img" + i);//設置初始大小localImagId.style.width = all_picW;localImagId.style.height = all_picH;//圖片異常捕捉try {localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picTagSrc;}catch (e) {alert("圖片格式不正確!");return false;}picjPreviewInfo.style.display = 'none';document.selection.empty();}} return true;}
</script>
</head>
<body>
<div><input type="file" name="file" id="upMultilImages" multiple="multiple" onchange="javascript:multiImagePreview();" accept="image/*" /><div id="picViewsBox"></div>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的js前端实现多图图片上传预览的两个方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
