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实现控件的隐藏和显示实例
Feb 08 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
Document 对象的常用方法
2009/07/31 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
python实现电子词典
2020/04/23 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
python Tkinter的图片刷新实例
2019/06/14 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
欢送退休感言
2014/02/08 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
党员个人总结范文
2015/02/14 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
使用refresh_token实现无感刷新页面
2022/04/26 Javascript