<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. PYTHON-模块 re subprocess

    # re 正则表达式 ****** 学符号 单字符 范围 重复 位置 分组 精准 写不出来百度去# http://www.cnblogs.com/Eva-J/articles/7228075.html ...

  2. theos安装详解

    1.安装 Homebrew  安装命令官方网站  https://brew.sh 2.利用 

  3. Navicat for MySQL 连接Mysql8.0 报 1251

    先设置Mysql全局 cmd下输入: mysql -uroot -p root密码 use mysql; update user set host = "%" where user ...

  4. （初）Knockout 监控属性(Observables)

    1 创建带有监控属性的view model 1.1 Observables Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tr ...

  5. Docker发布程序那些事

    最近使用docker比较频繁,所以也难免碰到一些坑,在这里记录一下,给自己写个笔记 1.docker 1.13.0版本不支持docker stack deploy -c 多个 -c的yml文件合并 如 ...

  6. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  7. SQL反模式学习笔记13 使用索引

    目标:优化性能 改善性能最好的技术就是在数据库中合理地使用索引.  索引也是数据结构,它能使数据库将指定列中的某个值快速定位在相应的行. 反模式:无规划的使用索引 1.不使用索引或索引不足 2.使用了 ...

  8. .net core 设置访问静态资源

  9. 学习 Vim —— Vimtutor 总结笔记

    Lesson 2 2.1-2.3 删除 [dw] 删除从光标开始处至下一词开始前的部分,光标停在下一词的词首. [de] 删除从光标开始处至词尾的部分. [d$] 删除从光标开始处至行末的部分. 2. ...

  10. LOJ.6504.[雅礼集训2018 Day5]Convex(回滚莫队)

    LOJ 莫队.发现只需要维护前驱后继就可以了. 但是加入一个点需要找到它当前的前驱后继,很麻烦还带个\(\log\). 但是如果只有删除某个点,只需要更新一下它的前驱后继即可. 用回滚莫队就好惹. 撤 ...