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


Posted in Javascript onNovember 18, 2016

一、将图片转成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前端实现多图图片上传预览的两个方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 #Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 #Javascript
整理一下常见的IE错误
Nov 18 #Javascript
require、backbone等重构手机图片查看器
Nov 17 #Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 #Javascript
移动端js图片查看器
Nov 17 #Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python正则表达式学习小例子
2020/03/03 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
班组长岗位职责范本
2014/01/05 职场文书
小学英语教学反思
2014/01/30 职场文书
社区党务公开实施方案
2014/03/18 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
离婚协议书标准格式
2014/10/04 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
庐山导游词
2015/02/03 职场文书
活动总结书怎么写
2015/05/11 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python