<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. Typecho - MyTagCloud标签云插件

    一.前言: 标签云是博客.CMS类系统的常见功能,读者可以根据标签快速的查找和浏览自己喜欢的文章.个人很喜欢Typecho的简洁,但对于后台不能控制前台标签栏目的显示还是略表遗憾.令人高兴的是Type ...

  2. JQuery速成大法

    什么是JQuery呢,很多都是只闻其名. jQuery是一个快速.简洁的JavaScript框架,是一个优秀的JavaScript代码库.jQuery设计的宗旨是"write Less,Do ...

  3. PHP 序列化与反序列化函数

    序列化与反序列化 把复杂的数据类型压缩到一个字符串中 serialize() 把变量和它们的值编码成文本形式 unserialize() 恢复原先变量   1.创建一个$arr数组用于储存用户基本信息 ...

  4. 【2017-05-02】winform弹出警告框是否进行增删改操作、记事本制作、对话框控件和输出输入流

    一.winform弹出警告框是否进行增删改操作 第一个参数是弹出窗体显示的内容,第二个参数是标题,第三个参数是该弹窗包含确定和取消按钮. 返回的是一个枚举类接收一下. 再进行判断,如果点的是确定按钮, ...

  5. final的用法

    先来看一段代码 class Car extends Vehicle {     public static void main (String[] args)     {         new  C ...

  6. [刷题]算法竞赛入门经典(第2版) 6-4/UVa439 6-5/UVa1600

    比较忙比较累,只贴代码了. 题目:6-4 UVa439 - Knight Moves //UVa439 - Knight Moves //Accepted 0.000s //#define _XIEN ...

  7. XML编辑工具

    [标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...

  8. 【JAVAWEB学习笔记】15_request

    HttpServletRequest 学习目标 案例一.完成用户注册 案例二.完成登录错误信息的回显 1．HttpServletRequest概述 我们在创建Servlet时会覆盖service()方 ...

  9. B计划

    简介:从一个初学者的角度来讲,要从六个方面来对计算机来做一个大约的了解: 计算机的组成: 电脑配置: 操作系统: CDEF盘: 正确的开关机(主要是关机): 常用软件: 1. 电脑由哪几部分组成?   ...

  10. （基础篇 走进javaNIO）第二章-NIO入门

    在本章巾,我们会分别对 JDK 的BIO ,NIO 和JDK 1.7 最新提供的 NI02.0的使用进行详细说明 ,通过流程图和代 码讲解,让大 家体会到随着 Ja va 1/0 类库的 不断发展和改 ...