<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前端实现多图图片上传预览的更多相关文章

  1. [js] - 前端FileReader使用,适用于文件上传预览.(并未传入后端)

    <body> <div class="box"> <div class="container"> <ul> &l ...

  2. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  3. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  4. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  5. js:s上次预览，上传图片预览，图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  7. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  8. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  9. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

随机推荐

  1. H5前端框架推荐合集

    Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...

  2. 【算法系列学习】状压dp [kuangbin带你飞]专题十二 基础DP1 D - Doing Homework

    https://vjudge.net/contest/68966#problem/D http://blog.csdn.net/u010489389/article/details/19218795 ...

  3. TreeSet小练习

    package 练习.test1; import java.util.Iterator; import java.util.TreeSet; /* 需求:将字符串中的数值进行排序. 例如String ...

  4. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

  5. PHP 无限级分类(递归)

    网上有很多,这是我自己做测试用的$arr = array( array('id'=>1,'name'=>'电脑','pid'=>0), array('id'=>2,'name' ...

  6. c#枚举值增加特性说明

    c#枚举值增加特性说明 通过特性给一个枚举类型每个值增加一个字符串说明,用于打印或显示. 自定义打印特性 [AttributeUsage(AttributeTargets.Field)] public ...

  7. Alsa 读取wave文件，并播放wave 文件

    对于一个wave文件,如果需要播放,涉及到几个方面 1.对于wave文件的解析 2.通过解析wave文件,将得到的参数(主要是sampfrequency, bitsperSample,channel) ...

  8. 关于WannaCry病毒的见解与预防，我有话说！

    好久没写博客了,自从定性专做技术扩展服务后,已经有两年半没有正式写过博客,要不是这次WannaCry病毒的厉害程度,我也懒得去写博客,为什么呢?写技术文章吗?两年多没有研究新的技术,没有什么好写的!所 ...

  9. New Adventure----GUI Design Studio

    新建项目工程    File->New Project 新建设计文件    Project->New Design 单个设计文件的页面,F9运当前设计页面   页面控件中有绿色包围的控件为 ...

  10. ACCESS数据库增强器需求及介绍

    目前版本:ver1.0.0.2 现已支持cs文件浏览,高亮显示 针对如下图所示的access数据库,我想导出access数据库的所有或者部分表的表结构,还想对表进行封装,封装如下所示. using S ...