<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. $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 转成[[1,a],[2,b],[3,c],[4,d],[5,3]]

    $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 结果 [[1,a],[2,b],[3,c],[4,d],[5,3]] return array_map(function($v1,$v2 ...

  2. Python--抽象类接口类

    一. 继承有两种用途: """ 一:继承基类的方法,并且做出自己的改变或者扩展(代码重用) 二:声明某个子类兼容于某基类,定义一个接口类Interface,接口类中定义了 ...

  3. hdu 5183

    hdu 5183(Hash处理区间问题) 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5183 题意:给出一个n个元素的数组,现在要求判断 a1-a2 ...

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

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

  5. 【SQL】 MySql与SqlServer差异比较(MySql踩坑全集)

    本文主要记录将数据库从SqlServer移植到MySql的过程中,发现的各种坑爹问题.以SqlServer为主,记录MySql的差异性. 一.IF语句 首先MySql中的的IF语法不同. IF Con ...

  6. Java 常用知识点

    Java 常用知识点 1.日期格式化 SimpleDateFormat Date date=new Date(System.currentTimeMillis()) ; SimpleDateForma ...

  7. 转 InnoDB Error Handling

    14.20.4 InnoDB Error Handling Error handling in InnoDB is not always the same as specified in the SQ ...

  8. Java课程寒假之《人月神话》有感之二

    一.外科手术队伍 即建立一个合理的团队,按照书上的说法就是,在开发一个大的系统的时候,原本精英的团队就可能无法在较短的时间内完成一个大型的程序,在这样的条件下,必须扩大团队的规模,即使这个精英程序员的 ...

  9. codecademy quiz——JavaScript Promise

    Evernote Export What is the fulfilled value of Promise.all()?  A Promise     An object     An array ...

  10. 九、JSP入门(1)

    JSP入门 1 JSP概述 1.1 什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态资源.它与html页面的作用是相同的,显示数据和获取数据. 1.2 JSP的 ...