js前端实现多图图片上传预览的两个方法
2024-06-02 19:14:20
一、将图片转成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前端实现多图图片上传预览的两个方法相关推荐
- 如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- js实现图片上传预览功能
js实现图片上传预览功能 很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- 图片上传预览的几种方式，了解下？
图片上传预览场景基本处处可见,朋友圈发动态配图,身份验证及头像更新,莫过如斯. 原由 最近在研究twitter PC网站的时候,在个人中心的主页,设置个人的背景图的时候,发现twitter有个非常好的 ...
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
- Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
最新文章
- 解决 Ext.Ajax.request 同步请求实现问题 (Ext3.0)
- 前端跨域问题解决方案汇总
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
- LINQ中的Lambda表达式
- webpack自定义打包命令
- 【操作系统/OS笔记02】操作系统的历史、操作系统结构
- maven 教程入门 maven 配置管理 编译java程序
- opencv+python图像匹配——模版匹配、特征点匹配
- DayDayUp：此刻，可以坐在家里，来一次，说走就走的【VR虚拟旅行】1000多个国内外景区免费看！
- 论文BeautyGlow: On-Demand Makeup Transfer Framework With Reversible Generative Network（2019，妆容迁移）
- 数据透视表mysql_MySQL查询和数据透视表
- 联想笔记本e480恢复出厂设置_联想e480恢复【快速学会免费恢复】
- 怎样在今日头条引流卖产品？今日头条免费引流技巧？
- 阿里云年中618钜惠都有哪些活动-详细的为你列举
- matlab受力曲线导入adams中,如何在adams中导入dxf曲线
- RD会话主机服务器2012上没有可用的远程桌面许可证服务器
- 求一个给定的n阶方阵的鞍点
- 关注居住证制度，关注户籍改革
- Windows Server2012 KB2919355 补丁无法安装
- k8s 本地镜像快速部署亲和性