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 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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检测用户语言的方法
2015/06/15 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
jquery判断浏览器类型的代码
2012/11/05 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
keras 权重保存和权重载入方式
2020/05/21 Python
如何学习Python time模块
2020/06/03 Python
通俗讲解python 装饰器
2020/09/07 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
车辆管理制度范本
2015/08/05 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
详解Python类和对象内容
2021/06/22 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL