<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. Java面试题复习笔记（框架）

    1.什么是框架? 为解决一个开放性问题而设计的具有一定约束性的支撑结构,再次结构上可以根据具体问题扩展,安插更多的组成部分,从而更迅速和方便地构建完整解决问题的方案. 2.MVC模式? 用一种业务逻辑 ...

  2. Java的家庭记账本程序（H） ：微信小程序 image 标签，在模拟器中无法显示图片？（已解决）

    日期:2019.2.25 博客期:036 星期一 吼!今天我还是继续研究了自己的微信小程序,还没有连接数据库,只是在xml的设计上添加了不少东西,大家可以看我的截图,嗯~说到今天的收获,就是 marg ...

  3. std::array中的std::get<n>()

    模板函数std::get<n>()是一个辅助函数,它能够获取到容器的第 n 个元素.模板参数的实参必须是一个在编译时可以确定的常量表达式,编译时会对它检查. get<n>()模 ...

  4. SQL反模式学习笔记10 取整错误

    目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...

  5. 【java】-- java并发包总结

    1.同步容器类 1.1.Vector与ArrayList异同 1.Arraylist和Vector都是采用数组方式存储数据,都允许直接序号索引元素,所以查找速度快,但是插入数据等操作涉及到数组元素移动 ...

  6. Android的Service组件

    首先,Service在Android体系中是什么?有什么功能?1. Service是服务,其执行线程是UI主线程(宿主进程的主线程):2. 和Activity最大的不同是:Service不涉及到与用户 ...

  7. Lesnoe Ozero 2017. BSUIR Open 2017

    A. Tree Orientation 树形DP,$f[i][j][k]$表示$i$的子树中有$j$个汇点,$i$往父亲的树边方向为$k$的方案数. 转移则需要另一个DP:$g[i][j][k]$表示 ...

  8. 5. Spring 通过 XML 配置 bean （进阶）

    1. 设置 bean 的作用域 当通过 Spring IOC 容器创建 bean 实例的时候,不仅可以完成 bean 的实例化,也可以为 bean 指定特定的作用域,Spring 支持以下 5 种作用 ...

  9. (50)Wangdao.com第七天_JavaScript 发展与简介

    一个完整的JavaScript 应该由以下三部分组成: ECMAScript DOM,全称Browser Object Model,即浏览器对象模型,主要处理浏览器窗口和框架 BOM,全称Docume ...

  10. vue_class 绑定_style 绑定

    1. class 绑定 data: { myClass: "bClass", hasA: true, hasB: false } 字符串模式: 类名不确定 <p class= ...