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

  1. <!DOCTYPE>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>图片上传本地预览</title>
  7.     <style type="text/css">
  8.         #preview {
  9.             width: 260px;
  10.             height: 190px;
  11.             border: 1px solid #000;
  12.             overflow: hidden;
  13.         }
  14.  
  15.         #imghead {
  16.             filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  17.         }
  18.     </style>
  19.     <script type="text/javascript">
  20.         //图片上传预览    IE是用了滤镜。
  21.         function previewImage(file) {
  22.             var MAXWIDTH = 260;
  23.             var MAXHEIGHT = 180;
  24.             var div = document.getElementById('preview');
  25.             if (file.files && file.files[0]) {
  26.                 div.innerHTML = '<img id=imghead>';
  27.                 var img = document.getElementById('imghead');
  28.                 img.onload = function () {
  29.                     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  30.                     img.width = rect.width;
  31.                     img.height = rect.height;
  32.                     //                 img.style.marginLeft = rect.left+'px';
  33.                     img.style.marginTop = rect.top + 'px';
  34.                 }
  35.                 var reader = new FileReader();
  36.                 reader.onload = function (evt) { img.src = evt.target.result; }
  37.                 reader.readAsDataURL(file.files[0]);
  38.             }
  39.             else //兼容IE
  40.             {
  41.                 var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
  42.                 file.select();
  43.                 var src = document.selection.createRange().text;
  44.                 div.innerHTML = '<img id=imghead>';
  45.                 var img = document.getElementById('imghead');
  46.                 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
  47.                 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  48.                 status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
  49.                 div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
  50.             }
  51.         }
  52.         function clacImgZoomParam(maxWidth, maxHeight, width, height) {
  53.             var param = { top: 0, left: 0, width: width, height: height };
  54.             if (width > maxWidth || height > maxHeight) {
  55.                 rateWidth = width / maxWidth;
  56.                 rateHeight = height / maxHeight;
  57.  
  58.                 if (rateWidth > rateHeight) {
  59.                     param.width = maxWidth;
  60.                     param.height = Math.round(height / rateWidth);
  61.                 } else {
  62.                     param.width = Math.round(width / rateHeight);
  63.                     param.height = maxHeight;
  64.                 }
  65.             }
  66.             param.left = Math.round((maxWidth - param.width) / 2);
  67.             param.top = Math.round((maxHeight - param.height) / 2);
  68.             return param;
  69.         }
  70.     </script>
  71. </head>
  72.  
  73. <body>
  74.     <div id="preview">
  75.         <img id="imghead" width=100% height=auto border=0 src='a1.png'>
  76.     </div>
  77.     <input type="file" onchange="previewImage(this)" />
  78. </body>
  79.  
  80. </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. elastic stack安装运行(docker)

    https://www.docker.elastic.co 注:目前阿里云为7.4 elasticsearch 参考https://www.elastic.co/guide/en/elasticsea ...

  2. SDM439平台出现部分机型SD卡不能识别mmc1: error -110 whilst initialising SD card【学习笔记】

    SDM439平台出现部分机型SD卡不能识别mmc1: error -110 whilst initialising SD card 打印了如下的log: - ::>[ after ms - :: ...

  3. win10下通过npm成功搭建react开发环境

    1.安装node-v12.13.1-x64(LTS) 2.安装creatre-react-app: npm install -g create-react-app 3.通过create-react-a ...

  4. window 10 打开某个 窗口常用命令

    1. ctrl +R ,输入:inetcpl.cpl 2. ctrl +R ,输入:services.msc 3. ctrl +R ,输入:msconfig 安装双系统,设置开机引导 4. ctrl ...

  5. 嵌入式LINUX基础教程 第2版

    嵌入式LINUX基础教程  第2版 目录 第1章 入门 11．1 为什么选择Linux 11．2 嵌入式Linux现状 21．3 开源和GPL 21．4 标准及相关组织 31．4．1 Linux标准基 ...

  6. [LeetCode] 342. Power of Four 4的次方数

    Given an integer (signed 32 bits), write a function to check whether it is a power of 4. Example:Giv ...

  7. VS2017中使用ObjectARX 2019 wizard的 ArxWizMFCSupport向导出现的bug修复前因后果

    VS2017中使用ObjectARX 2019 wizard的 ArxWizMFCSupport向导出现的bug,提示脚本错误. 实际原因类似在arx2012向导的问题,需要修改C:\Program ...

  8. QT 5.x 网络资源集锦

    github上的好书:太好了: http://qmlbook.github.io/en/ch01/index.html 论坛: 基于QT的音乐创作软件:(是不是可以跟谷歌的深度学习艺术项目结合) ht ...

  9. Response知识点小结

    HTTP协议: 1. 响应消息:服务器端发送给客户端的数据 * 数据格式: 1. 响应行 1. 组成:协议/版本 响应状态码 状态码描述 2. 响应状态码:服务器告诉客户端浏览器本次请求和响应的一个状 ...

  10. 目标检测算法Faster R-CNN

    一:Faster-R-CNN算法组成: 1.PRN候选框提取模块: 2.Fast R-CNN检测模块. 二:Faster-R-CNN框架介绍 三:RPN介绍 3.1训练步骤:1.将图片输入到VGG或Z ...