js前端实现多图图片上传预览的两个方法(推荐)

时间：2021-05-26

一、将图片转成icon码的实现方式

html代码：

<div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class="dui" id="imgOrder_dui" style="display: none;"></span></div> <div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;"> <img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"/></div>

js代码

//图片预览功能function previewImage(file,imgNum){ var MAXWIDTH = 200; var MAXHEIGHT = 200; var div = document.getElementById('preview'+imgNum); if (file.files && file.files[0]) { div.innerHTML ='<img id=imghead'+imgNum+'>'; var img = document.getElementById('imghead'+imgNum+''); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, 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=imghead'+imgNum+'>'; var img = document.getElementById('imghead2'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead"+imgNum+" style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; }}function clacImgZoomParam( 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;}

二、使用js的另一种方法一次选中多个图片预览展示

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试页面</title><script type="text/javascript"> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("dd"); dd.innerHTML = ""; var fileList = docObj.files; for (var i = 0; i < fileList.length; i++) { dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>"; var imgObjPreview = document.getElementById("img"+i); if (docObj.files && docObj.files[i]) { //火狐下，直接设img属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '150px'; imgObjPreview.style.height = '180px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); } else { //IE下，使用滤镜 docObj.select(); var imgSrc = document.selection.createRange().text; alert(imgSrc) var localImagId = document.getElementById("img" + i); //必须设置初始大小 localImagId.style.width = "150px"; localImagId.style.height = "180px"; //图片异常的捕捉，防止用户修改后缀来伪造图片 try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch (e) { alert("您上传的图片格式不正确，请重新选择!"); return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } } return true; }</script></head><body><div style="margin :0px auto; width:990px;"><input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" /><div id="dd" style=" width:990px;"></div></div></body></html>

以上这篇js前端实现多图图片上传预览的两个方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章