<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. 【算法系列学习】Dijkstra算法变形 [kuangbin带你飞]专题四 最短路练习

    https://vjudge.net/contest/66569#problem/B 类试题:noip2013 货物运输 POJ 1797 Heavy Transportation 方法一:Dijks ...

  2. 基于Struts2，Spring4，Hibernate4框架的系统架构设计与示例系统实现

    笔者在大学中迷迷糊糊地度过了四年的光景,心中有那么一点目标,但总感觉找不到发力的方向. 在四年间,尝试写过代码结构糟糕,没有意义的课程设计,尝试捣鼓过Android开发,尝试探索过软件工程在实际开发中 ...

  3. int与string的相互转换

    <1>stringstream 的方式 C++标准库里面有一个stringstream可以用于各种数据类型之间的转换.无论是从int到string,还是从string到int都可以使用这种 ...

  4. hdu1520 Anniversary party 简单树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 思路:树形DP的入门题 定义dp[root][1]表示以root为根节点的子树,且root本身参 ...

  5. <<、>>、>>>移位操作

    <<,有符号左移位,将运算数的二进制整体左移指定位数,低位用0补齐. int leftShift = 10; System.out.println("十进制:" + l ...

  6. 从.Net版本演变看String和StringBuild性能之争

    在C#中string关键字的映射实际上指向.NET基类System.String.System.String是一个功能非常强大且用途非常广泛的基类,所以我们在用C#string的时候实际就是在用.NE ...

  7. event对应的各种坐标

    IE8不支持的PageXY   相对于整个页面鼠标的位置 包括溢出的部分 event.pageX; event.pageY; 所有浏览器支持的: 相对于当前浏览器窗口可视区域的坐标event.clie ...

  8. 转义字符及URI编码

    URL中的转义字符 当URL的参数中出现诸如+,空格,/,?,%,#,&,=等特殊字符串符号时,因为上述字符有特殊含义,导致服务器端无法正确解析参数. 解决办法:将这些字符转化成服务器可以识别 ...

  9. iOS crash日志分析

    iOS crash日志分析 一. 寻找crash文件:手机崩溃后的ips或者crash文件(ips文件可以直接修改成crash文件,直接改后缀名就可以了),这里说下如何拿到crash文件 1. 把运行 ...

  10. 使用PostProcessBuild设定Unity产生的Xcode Project

    简单来说就是unity提供一套api去修改xcode项目工程配置以及修改plist文件内容(当unity build结束后, 会自动回调OnPostProcessBuild). 以下是一些用到的配置处 ...