运用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. 20145222何志威《网络对抗》- Web安全基础实践

    20145322何志威<网络对抗>Exp9 Web安全基础实践 基础问题回答 1.SQL注入原理,如何防御 SQL注入 就是通过把SQL命令插入到"Web表单递交"或& ...

  2. 奇怪的问题：改变了界面，生成的exe不起作用

    现象:修改ui界面的控件,如改变text,生成exe没有改变,清理.重新创建也没有作用 原因:ui.h没有被更新,每次软件生成的时候都是调用的旧的文件 解决:先将debug和release文件夹删除, ...

  3. 如何修改ls命令列出来的目录颜色

    答:默认为蓝色,在黑色背景下无法看清楚,因此以以下方法修改; 1.往~/.bash_profile文件中添加以下内容: export LS_COLORS='no=00:fi=00:di=01;33:l ...

  4. 【附5】springboot之配置文件

    本文转载自http://www.jianshu.com/p/80621291373b,作者:龙白一梦 我的boss 代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境 ...

  5. 2018 Machine Learning

    2018/8/13 线性模型(西瓜书P53~P73) Optimizer https://blog.csdn.net/u012151283/article/details/78154917 2018/ ...

  6. stm32 ADC使用方法

    void Adc_Init(void) { ADC_InitTypeDef ADC_InitStructure; GPIO_InitTypeDef GPIO_InitStructure; RCC_AP ...

  7. 4：JavaScript中的对象

    对象 --属性+方法(都可以添加) ------继承关系------------原型(类) 获取变量属性:obj.x或者obj[“x”]: this对象----a---范围 arguments对象 参 ...

  8. Qt5_容器_知识点记录

    1.删除: 1.1.erase 1.2.remove / removeAt 2. 3. 4. 5.

  9. Codeforces 899E - Segments Removal

    899E - Segments Removal 思路:priority_queue+pair 代码: #include<bits/stdc++.h> using namespace std ...

  10. CodeSmith公共类维护

    CodeSmith在使用过程中,我们经常会出现同一个方法在不同的页面调用,如果我们在每个页面都写一个这样的方法,那么代码量非常大,同时如果以后需要修改也要在每个页面分别去修改,这无疑是劳命伤财,如果能 ...