运用js实现上传图片前的预览（支持多张图片），实现的例子如下：

1、源码例子：

1）Js脚本页面

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js上传图片预览</title>

</head>

<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 = ; i < fileList.length; i++) {

            //动态添加html元素

            dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";

            //获取图片imgi的对象

            var imgObjPreview = document.getElementById("img"+i); 

            if (docObj.files && docObj.files[i]) {

                //火狐下，直接设img属性

                imgObjPreview.style.display = 'block';

                imgObjPreview.style.width = '200px';

                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 = "200px";

                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>

2）html页面

<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>

2、结果视图

1）单个图片预览

2）多个图片预览

3）参考例子来自：

http://blog.csdn.net/hj960511/article/details/51721134

js上传图片前预览方法（支持预览多个图片）的更多相关文章

  1. 模拟微信上传图片（带预览，支持预览gif）

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  2. 【前端】模拟微信上传图片（带预览，支持预览gif）

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  3. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  4. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  5. Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集

     Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集 继去年 10 月推出 Windows Azure HDInsight 之后,我们宣布 Windows Az ...

  6. Rider中Winform开发支持预览（5）

    1.Rider .netCore3.0 winform设计器支持预览,这点vs目前还不支持. 2.不过winform下控件选择工具栏都是没有图标的

  7. 关于云平台中OFFICE预览与视频预览的解决办法

    最近,随着firefox x64的升级,出现flash插件完全被禁止的现象,html5替换是大势所趋,原来我们在云平台中有多处使用flash的地方,比如OFFICE预览,视频播放,游戏等,现对于OFF ...

  8. js 返回前一页并刷新页面方法

    [导读] 要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中,下面我来给大家先介绍js 返回前一页并刷新页面,然后再把这些代码放在php中实现删除后返回当前页面并刷新页 ...

  9. Android 加载gif图片强大框架(支持预加载、缓存，还支持显示静态图片，一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

随机推荐

  1. 《网络攻防》实验五：MSF基础应用

    IE浏览器渗透攻击--MS11050安全漏洞 实验准备 1.两台虚拟机,其中一台为kali,一台为Windows Xp Professional(两台虚拟机可以相互间ping通). 2.亚军同学的指导 ...

  2. 【转】iOS学习之iOS禁止Touch事件

    iOS程序中有时会有需要禁止应用接收Touch的要求(比如动画进行时,防止触摸事件触发新方法). 一.一般有两种: 1.弄个遮罩层,禁止交互: 2.使用UIApplication中的方法进行相关的交互 ...

  3. VC++ 进度条更新方案

    在实际开发中,如果有耗时操作,一般会在工作线程处理数据,然后处理完成后把时间传递到UI线程进行显示,切记不要在工作线程对UI进行操作. 场景: 1. 很多程序需要根据处理业务的进度来更新进度条,进度条 ...

  4. shell编程学习笔记之特殊变量（$0、$1、$2、 $?、 $# 、$@、 $*）

    特殊变量($0.$1.$2. $?. $# .$@. $*) shell编程中有一些特殊的变量可以使用.这些变量在脚本中可以作为全局变量来使用. 名称 说明 $0 脚本名称 $1-9 脚本执行时的参数 ...

  5. cygwin下使用apt-cyg安装新软件

    1.获取  (记得先安装好git) git clone https://github.com/transcode-open/apt-cyg.git 2.安装apt-cyg cd apt-cyg chm ...

  6. openwrt如何单独编译uboot

    答:make package/boot/uboot-<chip series>/compile

  7. TeeChart的坐标轴

    TeeChart一共有六个坐标轴,一下是默认值 tChart1.Axes.Bottom.Visible = true;//横轴 tChart1.Axes.Left.Visible = true;//纵 ...

  8. 【自动化】基于Spark streaming的SQL服务实时自动化运维

    设计背景 spark thriftserver目前线上有10个实例,以往通过监控端口存活的方式很不准确,当出故障时进程不退出情况很多,而手动去查看日志再重启处理服务这个过程很低效,故设计利用Spark ...

  9. FAST：通过Floodlight控制器下发流表

    参考: Floodlight+Mininet搭建OpenFlow(四):流表操作 通过Floodlight控制器下发流表 下发流表的方式有两种: 1.借助Floodlight的北向API,利用curl ...

  10. DPDK的安装与绑定网卡

    DPDK的安装有两种方法: 第一种是使用dpdk/tools/setup.sh选择命令字来安装:第二种是自己手动安装.为了更好地熟悉DPDK,我使用第二种方法. 0.设定环境变量 export RTE ...