<html>

    <head>

        <title>

            www.jb51.net图片上传预览

        </title>

        <script>

            function PreviewImage(imgFile) {

                var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;

                if (!pattern.test(imgFile.value)) {

                    alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");

                    imgFile.focus()

                } else {

                    var path;

                    if (document.all) {

                        imgFile.select();

                        path = document.selection.createRange().text;

                        document.getElementById("imgPreview").innerHTML = "";

                        document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"

                    } else {

                        path = URL.createObjectURL(imgFile.files[0]);

                        document.getElementById("imgPreview").innerHTML = "<img src='" + path + "'/>"

                    }

                }

            }

        </script>

    </head>

    <body>

        <div>

            <input type="file" onchange='PreviewImage(this)' />

            <div id="imgPreview" style='width: 500px; height: 400px;'>

                <img src="" />

            </div>

        </div>

    </body>

</html>

　　

JavaScript实现预览本地上传图片的更多相关文章

  1. es5预览本地文件、es6练习代码演示案例

    es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...

  2. 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...

  3. javascript编辑器预览模式解密

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js:s上次预览，上传图片预览，图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. IE7+ 浏览器兼容预览本地图片

    css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...

  6. vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

    思路:1.先做出一个上传的图片的上传区 <!-- 上传区 --> <label for="fileUp"> <div class="upBo ...

  7. 如何在手机上预览本地h5页面

    很简洁的一个方法: 1.安装nodeJS环境 2.在当前所在项目文件夹下输入命令: npm install anywhere -g3.输入命令: anywhere,即可在浏览器以本机ip地址为域名,自 ...

  8. JavaScript图片预览

    预览选中的图片文件 jQuery $("#selectImage").change(function(){ $("#image").attr("src ...

  9. 手机预览本地html

    下载nginx,地址http://nginx.org/en/docs/windows.html 解压后替换html中内容即可 在浏览器输入http://localhost/即可预览    或者换成ip ...

随机推荐

  1. celery 大量消息的分布式系统 定时任务

    Celery 1.什么是Celery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 https://www.jia ...

  2. Java中解决前端的跨域请求问题

    在最近的分布式项目中,由于前端需要向后台请求数据,但不是同一个域名的,常用的ajax方法并不能成功调用,索然后台有数据返回,但是并不能被前端正常解析. 于是便查询知道了后台返回的数据格式的问题.不能用 ...

  3. python第九天（9-33）

    一:进程 进程概念 进程就是一个程序运行在一个数据集上的一次动态执行过程 进程一般由程序,数据集,进程控制块组成 进程控制块: 进程控制块用来记录进程的外部特征,描述进程的执行变化过程,系统可以利用它 ...

  4. centos7安装elasticsearch

    [root@aaron tools]# wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.5.1.zi ...

  5. Swift 使用 日常笔记

    //------------------- var totalPrice: Int = { willSet(newTotalPrice) { //参数使用new+变量名且变量名首地址大写 printl ...

  6. 使用Type.MakeGenericType，反射构造泛型类型

    有时我们会有通过反射来动态构造泛型类型的需求,该如何实现呢?举个栗子,比如我们常常定义的泛型委托Func<in T, out TResult>,当T或TResult的类型需要根据程序上下文 ...

  7. EF执行SQL返回动态类型

    using System; using System.Data.Common; using System.Data.Entity.Core.Objects; using System.Data.Ent ...

  8. linux（CentOS）磁盘挂载数据盘

    linux(CentOS)磁盘挂载数据盘:第一步:查看是否存在需要挂载的磁盘: sudo fdisk -l 第二步:为需要挂载的磁盘创建分区: sudo fdisk /dev/vdb 执行中:依次选择 ...

  9. VScode查找替换常用正则表达式

    1.从字符串开始到结束,例如:<a href="#">测试</a> (<'.*?>) //匹配到整个a标签 (>'.*?<) //匹 ...

  10. 4.2模拟赛 wormhole(期望DP Dijkstra)

    \(\color{white}{orzmjt又切题了...}\) \(Description\) 给定一张有向图,每条边在每一时刻有\(p_i\)的概率存在.求最优策略下从\(1\)走到\(n\)最少 ...