<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--map()函数

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于list [1, 2 ...

  2. Allegro PCB Design GXL (legacy) 将brd文件另存为低版本文件

    Allegro PCB Design GXL (legacy) version 16.6-2015 参考:https://blog.csdn.net/qq_29761395/article/detai ...

  3. RN页面获取组件位置和大小的方法

    在RN的页面布局和操作中,有时需要获取元素的大小和位置信息,本文从网上抄袭了几个常用方法,以备不时之需. 首先是获取设备屏幕的宽高 import {Dimensions} from 'react-na ...

  4. 【BZOJ4589】Hard Nim（FWT）

    题解: 由博弈论可以知道题目等价于求这$n$个数$\^$为0 快速幂$+fwt$ 这样是$nlog^2$的 并不能过 而且得注意$m$的数组$\^$一下会生成$2m$ #include <bit ...

  5. 02.Control

    01.if ''' 제어문 = 조건문(if) + 반복문(while, for) 조건문 기본 형식1) python 블럭 if 조건식 : 실행문 실행문 cf) c언어 블럭 if 조건식 { ...

  6. 多媒体开发（6）：滤镜实现各种图片效果 | Video-Filters | avfilter | 变色

    之前讲过使用FFmpeg的drawtext滤镜(把图片或文字加到视频上),而实际上,FFmpeg的滤镜很强大,远不止加字幕或加图片的功能.滤镜是很有趣的,可以把图片变模糊.变色.缩放旋转,等等. 本文 ...

  7. Struts2深入

    Struts2架构剖析 1.客户端向Servlet容器(如Tomcat)提交一个请求 2.请求经过一系列过滤器(如ActionContextCleanUp过滤器等) 3.核心控制器被调用,询问Acti ...

  8. mongodb 遇到问题-查询单个需要包装id

    mongodb,get字符查询需要传入特定的包装id才能识别 const ObjectID = require('mongodb').ObjectID exports.queryOne = (req, ...

  9. Linq 动态组合排序（Lambda）

    最近有个项目需要做一个排班的功能,需要对排班的数据按不同的规则进行排序:因为排序规则是动态变化的,所以不太适合放到数据库中(临时表)中处理: 所以考虑使用Linq的排序方式(按不同的条件判断条件组合排 ...

  10. [HDU4669]Editor (栈)

    题意 模拟编辑器,还是给链接吧 https://vjudge.net/problem/HDU-4699 思路 两个栈 代码 //poj1050 //n^4暴力 #include<algorith ...