<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. CentOS7上部署taiga项目管理软件

    作者:waringid 一.简介 Taiga 是一个免费开源,而且功能非常强大的项目管理平台,用于初创企业和敏捷开发团队.提供一个简单.漂亮的项目管理工具.Taiga 采用 Python Django ...

  2. centos + nginx + php-fpm +mysql的简单配置

    安装前准备 安装约定(这个根据自己习惯,可自行修改) 1.软件源码包我都下载到/usr/local/src这个目录下 2.软件一般都编译安装到/usr/local这个目录下 安装基础库 yum -y ...

  3. 【web】服务器推送的实现方式（转）

    轮询 http流 websocket   https://www.cnblogs.com/freud/p/8397934.html http2.0 浅谈Websocket.Ajax轮询和长连接(lon ...

  4. 爬虫框架 Scrapy

    一 介绍 crapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途十分广泛,可用 ...

  5. 不输入密码执行SUDO命令

    假如我们需要用户名nenew执行sudo时不用输入密码 1.打开sudoers: visudo /etc/sudoers 2.在文件的最后一行添加: nenew    ALL=(ALL) NOPASS ...

  6. Matlab将多项式的系数设为0

    符号运算时有些多项式的系数值接近于0,像这样 fun = 3.5753839759325595498222646101085e-49*x + 1.836709923159824231201150839 ...

  7. + CategoryInfo : NotSpecified: (:) [], PSSecurityException + FullyQualifiedErrorId : RuntimeException

    File C:\Users\danv\Documents\WindowsPowerShell\profile.ps1 cannot be loaded because the execution of ...

  8. 项目sql统计

  9. Android高级工程师面试实战，您会挂么？

    xxx公司面试总结 面试形势 群聊(2个面试官+HR+自己) 面试流程 自我介绍 面试官根据你的介绍开始问 你对我们公司有什么想了解的么(复活卡,要时回到没有了也就没有了,可以让面试官给自己提一下建议 ...

  10. [R]dplyr及ggplot2中的变量引用列的问题

    问题描述: 存在这么一个场景,当需要动态选择列作为dplyr或ggplot2的输入时,列名的指定会出现问题. 以iris举例: # 以iris dataset为例 colnames <- c(& ...