<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>checkbox -value </title>

    <link rel="stylesheet" href="">

    <script src='./jquery-1.7.1.min.js'></script>

    <style type="text/css">

    .showImg {}

    .showImg img {

        width: 50px;

        height: 50px;

    }

    </style>

</head>

<body>

    <div class="main">

        <label for="imgfile"><span class="fakeButton">Insert Images</span></label>

        <!-- 下面为了避免中文，由上面替换 -->

        <!-- <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple value="Insert Image" onchange="javascript:setImagePreview();" style="position:absolute;clip:rect(0 0 0 0);"> -->

        <input type="file" accept="image/jpeg,image/png,image/gif" name="imgfile" id="imgfile" multiple onchange="javascript:setImagePreview();">

        <br />

        <div id="showImg" class="showImg"></div>

    </div>

    <script type="text/javascript">

    function setImagePreview() {

        var imghtml = imgUrls();

        if (imghtml === '111') {

            window.alert('Notice', 'You can upload up to three photos');

            return false;

        }

        $('#showImg').html(imghtml);

    }

// 限制传递图片的张数

    function imgUrls() {

        var imgsrcs = getUrl();

        var imghtml = '';

        var len = imgsrcs.length;

        if (len > 3) {

            return '111';

        }

        for (var i = 0; i < len; i++) {

            imghtml += '<img src=' + imgsrcs[i] + ' alt="you have selected">&nbsp;&nbsp;';

        }

        return imghtml;

    }

    function getUrl() {

        var obj = $('#imgfile')[0].files;

        var len = obj.length;

        var imgsrcs = [];

        for (var i = 0; i < len; i++) {

            imgsrcs[i] = getObjectURL(obj[i]);

        }

        //添加图片路径到img src中进行预览

        //不同浏览器下的路径不同

        function getObjectURL(file) {

            var url = null;

            if (window.createObjectURL != undefined) { // basic

                url = window.createObjectURL(file);

            } else if (window.URL != undefined) { // mozilla(firefox)

                url = window.URL.createObjectURL(file);

            } else if (window.webkitURL != undefined) { // webkit or chrome

                url = window.webkitURL.createObjectURL(file);

            }

            return url;

        }

        return imgsrcs;

    }

    </script>

</body>

</html>

原生js上传图片时的预览的更多相关文章

  1. JS 上传图片时实现预览

    网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...

  2. JS上传图片本地实时预览缩略图

    HTML 代码如下 <body> <table width="100%" border="0" cellspacing="0&quo ...

  3. 原生JS上传,实现预览并且兼容大部分IE

    // 前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 // 图片上传预览 IE是用了滤镜 function previewImage(file) { var MA ...

  4. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

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

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

  6. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  7. OSS上传图片无法在线预览的解决方案

    OSS上传图片无法在线预览的解决方案 最近在做的项目涉及到商品详情,由于前端用的flutter框架并且该详情为富文本,dart语言关于富文本的组件不是非常友好,当富文本中的图片无法在浏览器中直接预览的 ...

  8. 使用pdf.js在移动端预览pdf文档

    pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...

  9. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

随机推荐

  1. 自定义安装visual studio 2010开发asp.net

    VS2010的安装对于VS的安装大家肯定都熟悉,不过我在很多地方看到的是大家讲VS的全部组件都安装了,不但浪费磁盘空间,还降低了系统性能,除此之外,还有人安装了VS之后不知道顺手把MSDN安装上,害得 ...

  2. 静态文件link 数据库迁移命令 新建app命令

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"& ...

  3. 2018-2019-1 20189221 《Linux内核原理与分析》第六周作业

    2018-2019-1 20189221 <Linux内核原理与分析>第六周作业 实验五 实验过程 将Fork函数移植到Linux的MenuOS fork()函数通过系统调用创建一个与原来 ...

  4. 2018-2019-1 20189221《Linux内核原理与分析》第三周作业

    2018-2019-1 20189221<Linux内核原理与分析>第三周作业 实验二 完成一个简单的时间片轮转多道程序内核代码 实验过程 在实验楼中编译内核 编写mymain.c函数和m ...

  5. [Guitar self-learning] 基本乐理知识1. 度，升降记号#/b

    度:是音程上面的单位, 指每两个音程(音名)之前的音距.(就像我们说身高时的cm一样, 用来表明当时的音高.) 升记号:#   , 表明在当前的音高下, 升半个音高. 如 #3  ==  4 降记号: ...

  6. Tensorflow检验GPU是否安装成功 及 使用GPU训练注意事项

    1. 已经安装cuda但是tensorflow仍然使用cpu加速的问题 电脑上同时安装了GPU和CPU版本的TensorFlow,本来想用下面代码测试一下GPU程序,但无奈老是没有调用GPU. imp ...

  7. 惠普开源的通信测试工具Seagull的安装体会

    1. 为省事起见,先下载安装包,发现依赖库版本太低,没法运行.于是源码编译安装.主要参考:https://github.com/codeghar/Seagull,似乎http://gull.sourc ...

  8. 一个vue的循环列表，里面的按钮的移入事件

    需求:移入的时候,互相关注变成取消关注 移入移出事件传参$event,把这个参数打印出来看就可以搞定,而不是移入的时候,文本都改变,只改变当前行 的文本 <p @mouseover=" ...

  9. HP-UX平台Oracle启动实例遭遇：ORA-27154,ORA-27300,ORA-27301,ORA-27302

    环境:HP-UX 11.31 + Oracle 11.2.0.4 现象:在hpux安装Oracle,按业务需求配置参数后,无法启动实例. 报错如下: ORA-27154:post/wait creat ...

  10. BDD 与DSL 入门

    正文: Behavior Driven Development,行为驱动开发是一种敏捷软件开发的技术,它鼓励软件项目中的开发者.QA和非技术人员或商业参与者之间的协作.在了解Behavior Driv ...