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 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
了解JavaScript中的选择器
May 24 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
php字符串分割函数explode的实例代码
2013/02/07 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
laravel自定义分页效果
2017/07/23 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
iview table高度动态设置方法
2018/03/14 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python 布尔操作实现代码
2013/03/23 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
农村婚礼证婚词
2014/01/08 职场文书
上课睡觉检讨书
2014/01/28 职场文书
高中教师评语大全
2014/04/25 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2015年公司新年寄语
2014/12/08 职场文书
行政处罚听证告知书
2015/07/01 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书