/*******************************正面图片上传预览开始****************************/
        function previewImage(file)   //img便签调用该函数 onchange="previewImage(this),onchange 事件会在域的内容改变时发生。
        {
          var MAXWIDTH  = 100;   //宽度
          var MAXHEIGHT = 100;   //高度
          var div = document.getElementById('preview');   //获取div控件id为preview的元素 同jQuery “var div=$("#preview");”
          if (file.files && file.files[0])
          {
              //div.innerHTML ='<img id=imghead1>';//innerHTML:重新设置div内的html代码
              var img = document.getElementById('imghead1');   //获取img控件id为imghead1的元素 同jQuery “var div=$("#imghead1");”
              img.onload = function(){ //img控件点击事件,同于控件调用非匿名函数
              //裁剪图片尺寸
           var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); //img.offsetWidth、img.offsetHeight img控件的高度和宽度
                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;}//获取到成功读取的文件内容,并以插入一个img节点的方式显示选中的图片。
              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=imghead1>';
            var img = document.getElementById('imghead1');
            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;
        }
        /*******************************正面图片上传预览结束****************************/

源码云盘地址:  http://pan.baidu.com/s/1nuPx1xf    提取码: bnyg

<div class="pic" id="preview"  >
                   <img class="sfimg" runat="server" id="imghead1" src="" />
                   <input type="hidden" runat="server" id="pictruePet" value="0" />
                   </div>

JavaScript上传图片及时预览的更多相关文章

  1. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  2. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  3. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  4. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  5. (JavaScript)实现上传图片实时预览和(文件)大小判断

    唉,为什么我一个做大数据和后端的要为前端耗尽心力啊??!! 昨天在做一个网页时遇到了一个问题,有一处需要插入图片,我原本的想法是获取到上传文件的URL,然后动态插入img标签,设置src为图片的URL ...

  6. nodejs实现本地上传图片并预览功能(express4.0+)

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  7. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  8. 移动端h5实现拍照上传图片并预览&webuploader

    .移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html ...

  9. js实现上传图片及时预览

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

随机推荐

  1. 创建数据库和表相关的SQL语句

    SQL server注释语句有两种: 一种是单行注释,一种是多行注释. ******************** 单行注释用:--注释一行内容 多行注释用:/* *注释 *多行内容 */ 创建数据库: ...

  2. 通过zero copy来实现高效的数据传输

    这段时间在学习一些系统底层的知识,真后悔大学没有好好学习操作系统,导致好多文章看不懂.说到这不得不吐槽一下,像介绍系统层次的一些书籍好多都是中文翻译版,而大部分的中文翻译版大都语句晦涩,难懂,而且极易 ...

  3. Windows Azure HandBook (9) Azure性能测试(2)

    <Windows Azure Platform 系列文章目录> 在上一节中,笔者介绍了我们在Azure性能测试之前,首先需要提交<渗透性测试表> Windows Azure H ...

  4. html/css基础篇——link和@inport详解以及脚本执行顺序探讨

    先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

  5. Android客户端消息推送原理简介

    首先简单介绍一下Android消息推送的主要三种方式,如果你已经看过类似的文章,请直接忽略三种介绍.    1.使用SMS服务,即服务器端发送短信,然后手机客户端监听短信的广播,然后对数据进行一定的处 ...

  6. Clr静态数据Table-Valued函数

    前两天Insus.NET实现一个功能<在数据库中提供只读数据>http://www.cnblogs.com/insus/p/4384411.html ,在数据库中为程序提供静态数据.它是在 ...

  7. JS数组添加字典的方法

    var ary_RoleType = [];  //申明数组变量 for(var j = 0;j<treeData.length;j++){ if($.inArray(treeData[j].v ...

  8. ASP.NET MVC 模块与组件(二)——定制图片验证码

     本着简洁直接,我们就直奔主题吧! 下面是一个生成数字和字母随机组合的验证码类源代码: using System; using System.Drawing; using System.Drawing ...

  9. SSH实例(5)

    在src中新建struts.xml文件: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  10. scala泛函编程是怎样被选中的

    现在计算机技术发展现象是:无论硬件技术如何发展都满足不了软件需求:无论处理器变得能跑多快,都无法满足软件对计算能力的需要.按照摩尔定律(Moore's Law)处理器(CPU)每平方面积上包含的半导体 ...