运用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. 20145307陈俊达_安卓逆向分析_Xposed的hook技术研究

    20145307陈俊达_安卓逆向分析_Xposed的hook技术研究 引言 其实这份我早就想写了,xposed这个东西我在安卓SDK 4.4.4的时候就在玩了,root后安装架构,起初是为了实现一些屌 ...

  2. codevs & vijos 爱在心中 - Tarjan

    描述 “每个人都拥有一个梦,即使彼此不相同,能够与你分享,无论失败成功都会感动.爱因为在心中,平凡而不平庸,世界就像迷宫,却又让我们此刻相逢Our Home.” 在爱的国度里有N个人,在他们的心中都有 ...

  3. React 回忆录（三）使用 React 渲染界面

    Hi 各位,欢迎来到 React 回忆录!

  4. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  5. MAC BOOK Air 安装metasploit-framework

    Step 1:Xcode命令行开发工具OS X确保它已经安装了Xcode开发工具,在终端执行: xcode-select --install1Step 2:Java SDK安装Java sdk,不能用 ...

  6. ubuntu查询某个库的相关情况

    环境:Ubuntu 14.04 64bit 1.如:查询libjpeg库的位置 ldconfig -p |grep libjpeg 2.如:查询libjpeg库的相关名称 dpkg -l '*jpeg ...

  7. C#面试题集锦

    1.貌似最常用的是  值类型和引用类型,还有 装箱和 http://www.cnblogs.com/Autumoon/archive/2008/08/18/1270685.html http://ww ...

  8. 【自定义IK词典】Elasticsearch之中文分词器插件es-ik的自定义词库

    Elasticsearch之中文分词器插件es-ik 针对一些特殊的词语在分词的时候也需要能够识别 有人会问,那么,例如: 如果我想根据自己的本家姓氏来查询,如zhouls,姓氏“周”.      如 ...

  9. 【Coursera】Security Introduction -Eighth Week(1)

    Security Introduction People With Bad Intent 今天,Bob 向 Alice 发送了一条 "Hello,Allice!" 的信息,他们希望 ...

  10. Java中Arrays 与 Collections 的简单操作

    import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; import java.util.C ...