运用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. GD32芯片移植完全攻略

    GD32是国产兆易创新公司生产的完全兼容STM32系列的Cortex-M3处理器,具有几大亮点:1,高主频108MHz.性能提升30%以上,可超频到120MHz2,Flash零等待.STM32的72M ...

  2. Cortex-M3基础

    (一)寄存器 1 寄存器组      R0-R12: 通用寄存器 ------------------------------------------------------------------- ...

  3. Git 同时与多个远程库互相同步

    情形:有两个git服务器,比如github,gitosc,有个项目同时在两个服务器上,要互相同步 其实命令还是比较简单的,比如一个现有的git项目,在github,gitosc中分别创建好对应的项目. ...

  4. 【附9】elasticsearch-curator + Linux定时任务

    官网教程入口:https://www.elastic.co/guide/en/elasticsearch/client/curator/current/index.html 一.下载安装 下载:sud ...

  5. mini Linux制作过程(25/01)

    Mini Linux: 启动流程: 参考:https://blog.csdn.net/gatieme/article/details/50914250 https://linux.cn/article ...

  6. SPOJ - HIGH Highways（矩阵树定理）

    https://vjudge.net/problem/SPOJ-HIGH 题意: 给n个点m条边,求生成树个数. 思路: 矩阵树裸题. 具体的话可以看一下周冬的论文<生成树的计数及其应用> ...

  7. Eclipse 打包jar

    1．将项目打成jar: 1.1 要将项目打包成jar文件,方法很多,可以用Eclipse自带的打包工具Ant打包,也可以用Eclipse的Export生成jar.经过尝试后,我不推荐用Ant打包,因为 ...

  8. Spring Cloud 学习网址

    1. https://blog.csdn.net/forezp/article/details/70148833  史上最简单的 SpringCloud 教程 (非常适合新手快速上手教程)2.http ...

  9. 3-5 回顾，快速二分法的疑点解惑：为啥先右j移动？因为设定a[left]为基准点

    快速二分法的疑点解惑:为啥先右j移动?因为设定a[left]为基准数 , 1] [91, 86, 42, 46, 9, 68, 77, 46, 7, 1] [91, 86, 42, 46, 9, 68 ...

  10. android--------根据文件路径使用File类获取文件相关信息

    Android通过文件路径如何得到文件相关信息,如 文件名称,文件大小,创建时间,文件的相对路径,文件的绝对路径等. 如图: public class MainActivity extends Act ...