运用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. 20145122《敏捷开发与XP实践 》实验三实验报告

    实验名称 敏捷开发与XP实践 实验内容 1.团队代码要使用git在实验楼中托管,要使用结对同学中的一个同学的账号托管. 2.使用git推送代码并对结对同学的代码修改完成后再git推送. 3.掌握重构流 ...

  2. 认识epoll

    linux下的epoll(7)函数,其有着良好的就绪事件通知机制.Epoll 是被linux2.6开始引进的,但是不被其他的类UNIX系统支持,它提供了一种类似select或poll函数的机制:a. ...

  3. MFC、Qt、C#跨线程调用对象

    MFC.Qt.C#都是面向对象的编程库 1.MFC不允许跨线程调用对象,即线程只能调用它本身分配了空间的对象 In a multi-threaded application written using ...

  4. 2016年蓝桥杯B组C/C++省赛（预选赛）试题

    2016年蓝桥杯B组C/C++ 点击查看2016年蓝桥杯B组省赛题目解析(答案) 第一题:煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成 ...

  5. SQLSERVER 内存占用高的处理方式

    https://www.cnblogs.com/srsrd/p/6962982.html 方法一: 方法二: 使用以下语句查找出什么语句占内存最高,针对占内存高的语句进行优化SELECT SS.SUM ...

  6. require的压缩命令

    注意点 node r.js -o baseUrl=js name=main out=js/build.js paths.jquery=empty: 注:baseUrl是可选的 取决于页面是否有写这个入 ...

  7. 解决Floodlight界面无法显示问题

    参考: 解决Floodlight1.2+Mininet问题及使用安装 解决Floodlight界面无法显示问题 执行以下命令启动Floodlight时: java -jar target/floodl ...

  8. 05_Flume_timestamp interceptor实践

    1.目标场景 2.Flume Agent配置 # specify agent,source,sink,channel a1.sources = r1 a1.sinks = k1 a1.channels ...

  9. Git operate

    新建远程分支和删除 https://www.jianshu.com/p/ea1dab2de419 使用git branch -a查看所有分支 远程先开好分支然后拉到本地 git checkout -b ...

  10. python 时间元组转时间戳

    #!/usr/bin/python # -*- coding: UTF- -*- import time print(time.mktime((, , , , , , , , ))) 输出 15382 ...