演示地址：https://xibushijie.github.io/static/uploadImg.html

<!DOCTYPE>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>图片上传本地预览</title>

    <style type="text/css">

        #preview {

            width: 260px;

            height: 190px;

            border: 1px solid #000;

            overflow: hidden;

        }

        #imghead {

            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);

        }

    </style>

    <script type="text/javascript">

        //图片上传预览    IE是用了滤镜。

        function previewImage(file) {

            var MAXWIDTH = 260;

            var MAXHEIGHT = 180;

            var div = document.getElementById('preview');

            if (file.files && file.files[0]) {

                div.innerHTML = '<img id=imghead>';

                var img = document.getElementById('imghead');

                img.onload = function () {

                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

                    img.width = rect.width;

                    img.height = rect.height;

                    //                 img.style.marginLeft = rect.left+'px';

                    img.style.marginTop = rect.top + 'px';

                }

                var reader = new FileReader();

                reader.onload = function (evt) { img.src = evt.target.result; }

                reader.readAsDataURL(file.files[0]);

            }

            else //兼容IE

            {

                var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

                file.select();

                var src = document.selection.createRange().text;

                div.innerHTML = '<img id=imghead>';

                var img = document.getElementById('imghead');

                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

                status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);

                div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";

            }

        }

        function clacImgZoomParam(maxWidth, maxHeight, width, height) {

            var param = { top: 0, left: 0, width: width, height: height };

            if (width > maxWidth || height > maxHeight) {

                rateWidth = width / maxWidth;

                rateHeight = height / maxHeight;

                if (rateWidth > rateHeight) {

                    param.width = maxWidth;

                    param.height = Math.round(height / rateWidth);

                } else {

                    param.width = Math.round(width / rateHeight);

                    param.height = maxHeight;

                }

            }

            param.left = Math.round((maxWidth - param.width) / 2);

            param.top = Math.round((maxHeight - param.height) / 2);

            return param;

        }

    </script>

</head>

<body>

    <div id="preview">

        <img id="imghead" width=100% height=auto border=0 src='a1.png'>

    </div>

    <input type="file" onchange="previewImage(this)" />

</body>

</html>

js实现图片上传本地预览的更多相关文章

  1. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  2. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  3. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  4. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  5. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  6. HTML5图片上传本地预览

    在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 我们可以通过以下方式来解决. 获取图片 通过 File ...

  7. 原生JS实现图片上传并预览功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  9. jQuery：[1]实现图片上传并预览

    jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...

随机推荐

  1. 第06组 Beta冲刺（3/4）

    队名:福大帮 组长博客链接: 作业博客 : https://edu.cnblogs.com/campus/fzu/SoftwareEngineeringClassAofFuzhouUniversity ...

  2. .net core facebook 容易进的一个坑

    Microsoft.AspNetCore.Authentication.Facebook 库 services.AddAuthentication(CookieAuthenticationDefaul ...

  3. 数据库sql优化总结之3--SQL优化总结

    SQL是每个Java程序员必回的一项技能,  对于项目中的各种复杂业务, 你是否能写出高效率, 简洁的SQL对于项目的运行效率和稳定性是有非常大的作用的. 通过个人的理解和网上的资料总结了一下常见的S ...

  4. android -------- AES加密解密算法

    AES加密标准又称为高级加密标准Rijndael加密法,是美国国家标准技术研究所NIST旨在取代DES的21世纪的加密标准.AES的基本要求是,采用对称分组密码体制,密钥长度可以为128.192或25 ...

  5. # advanced packaging

    目录 advanced packaging ASM NEXX ASMPT完成收購NEXX 準備就緒迎接先進半導體封裝之高速增長 Intro Bumping 产品供应 晶圆溅镀– Apollo 300 ...

  6. ISO/IEC 9899:2011 条款3——术语、定义与符号

    3. 术语.定义与符号 1.对于此国际标准的意图,应用了以下定义.其它术语是在用斜体类型或一个语法规则左侧出现的地方定义.在本国际标准中所显式定义的术语不被假定为对其它地方所定义的类似术语的隐式引用. ...

  7. notepadd++中，如何根据某个字符将一行内容切割成多行？

    背景描述: 今天在做个事情,遇到下面字符,就想将每个词,如cluster,zookeeper都单独的一行 [cluster, activemq, controller, brokers, zookee ...

  8. 微信小程序 自定义tabbar实例

    在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...

  9. Tomcat 配置虚拟目录以及虚拟主机

    目录 虚拟目录 虚拟主机 虚拟目录 虚拟目录的功能 一般情况下,我们的打包后的项目都是放到tomcat/webapps目录下的,然后通过localhost:8080/project_name这个链接进 ...

  10. 解决端口被占用问题(端口timewait)

    当jmeter做千级并发时,有报错的接口,查看是不是本地端口被占用完了 netstat -an   查看是否有端口在 timewait timewait是知道用那个端口,但是端口被别人占用着 见tcp ...