<body>

    上传图片:   <input type="file" name="file"

                   style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />

    <div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">

    </div>

</body>

</html>

<script type="text/javascript">

    function PreviewImage(imgFile) {

        var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);

        filextension = filextension.toLowerCase();

        if ((filextension != '.jpg') && (filextension != '.gif')  && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {

            alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");

            imgFile.focus();

        }

        else {

            var path;

            if (document.all)//IE

            {

                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//FF

            {

                path = window.URL.createObjectURL(imgFile.files[0]);

                document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='" + path + "'/>";

                // document.getElementById("img1").src = path;

            }

        }

    }

</script>

　　

js 实现图片实时预览的更多相关文章

  1. js实现图片实时预览

    注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html  转载请注明出处 <body> 上传图片: <input type= ...

  2. RunJS推荐用于个人使用（使用方便JS、css实时预览、编辑、管理等功能）

    RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自己主动完毕等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/ waterm ...

  3. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  4. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  5. 图片实时预览JSP加js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS上传图片本地实时预览缩略图

    HTML 代码如下 <body> <table width="100%" border="0" cellspacing="0&quo ...

  7. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  8. MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

  9. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

随机推荐

  1. WebAPI IIS PUT和DELETE请求失败 405

    IIS拒绝PUT和DELETE请求是由于IIS为网站默认注册的一个名为WebDAVModule的自定义HttpModule导致的,如果我们的站点不需要提供针对WebDAV的支持,解决这个问题最为直接的 ...

  2. 2017年"程序媛和工程狮"绝对不能忽视的编程语言、框架和工具

      2017年"程序媛和工程狮"绝对不能忽视的编程语言.框架和工具 在过去的一年里,软件开发行业继续大踏步地向前迈进.回顾 2016 年,我们看到了更多新兴的流行语言.框架和工具, ...

  3. 解决NetBeans运行卡顿问题

    NetBeans安装目录下的此文件打开编辑 找到这一行,在后面添加最大的运行内存,这里我改成了900M(红色部分),重启NetBeans即可.netbeans_default_options=&quo ...

  4. git: 修改commiter 信息

    Committer: root root@localhost.localdomain 您的姓名和邮件地址基于登录名和主机名进行了自动设置.请检查它们正确 与否.您可以通过下面的命令对其进行明确地设置以 ...

  5. ng-class结合三目运算

    ng-class文档:https://docs.angularjs.org/api/ng/directive/ngClass 但是在实际项目中可能会用到三目运算,实例如下: <ul> &l ...

  6. Spring,Mybatis 整合Memcache

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...

  7. SQL创建流水号

    创建流水号表 CREATE TABLE SystemSerialNo ( SerialNoId INT PRIMARY KEY IDENTITY, TableName VARCHAR(60), Pre ...

  8. 布局TextView和EditText区别，layout_width和lay_weight区别--Android Studio

    1. TextView控件是文本表示控件,主要功能是向用户展示文本的内容,它是不可编辑的,如设置标题:EditText控件是编辑文本控件,主要功能是让用户输入文本的内容,它是可以编辑的.每一个控件都有 ...

  9. Quick Cocos （2.2.5plus）CoinFlip解析（MenuScene display AdBar二次封装）

    转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工 ...

  10. Linux 系统命令

    1.ctrl+z 让正在运行的任务暂停运行, 然后可用 bg %jobId使之后台运行,相当于: 命令 & 2. jobs -l 查看任务 3. echo $$ 查看当前进程 4.nohup ...