使用说明：新建文件，直接复制粘贴，保存文件为html 格式，在浏览器运行即可；

第一种：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

 </head>

  <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>

  <script>

  $(function(){

    $('#upLoad').on('change',function(){

        var filePath = $(this).val(),         //获取到input的value，里面是文件的路径

            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),

            imgBase64 = '',      //存储图片的imgBase64

            fileObj = document.getElementById('upLoad').files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象  

        // 检查是否是图片

        if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {

            alert('上传错误,文件格式必须为：png/jpg/jpeg');

            return;

        }  

        // 调用函数，对图片进行压缩

        compress(fileObj,function(imgBase64){

            imgBase64 = imgBase64;    //存储转换的base64编码

            $('#viewImg').attr('src',imgBase64); //显示预览图片

        });

    });  

     // 不对图片进行压缩，直接转成base64

    function directTurnIntoBase64(fileObj,callback){

        var r = new FileReader();

        // 转成base64

        r.onload = function(){

           //变成字符串

            imgBase64 = r.result;

            console.log(imgBase64);

            callback(imgBase64);

        }

        r.readAsDataURL(fileObj);    //转成Base64格式

    }  

       // 对图片进行压缩

    function compress(fileObj, callback) {

        if ( typeof (FileReader) === 'undefined') {

            console.log("当前浏览器内核不支持base64图标压缩");

            //调用上传方式不压缩

            directTurnIntoBase64(fileObj,callback);

        } else {

            try {

                var reader = new FileReader();

                reader.onload = function (e) {

                    var image = $('<img/>');

                    image.load(function(){

                        square = 700,   //定义画布的大小，也就是图片压缩之后的像素

                        canvas = document.createElement('canvas'),

                        context = canvas.getContext('2d'),

                        imageWidth = 0,    //压缩图片的大小

                        imageHeight = 0,

                        offsetX = 0,

                        offsetY = 0,

                        data = '';   

                        canvas.width = square;

                        canvas.height = square;

                        context.clearRect(0, 0, square, square);     

                        if (this.width > this.height) {

                            imageWidth = Math.round(square * this.width / this.height);

                            imageHeight = square;

                            offsetX = - Math.round((imageWidth - square) / 2);

                        } else {

                            imageHeight = Math.round(square * this.height / this.width);

                            imageWidth = square;

                            offsetY = - Math.round((imageHeight - square) / 2);

                        }

                        context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);

                        var data = canvas.toDataURL('image/jpeg');

                        //压缩完成执行回调

                         callback(data);

                    });

                    image.attr('src', e.target.result);

                };

                reader.readAsDataURL(fileObj);

            }catch(e){

                console.log("压缩失败!");

                //调用直接上传方式  不压缩

                directTurnIntoBase64(fileObj,callback);

            }

        }

    }

});  

 </script>

 <body>

    <input type="file" id="upLoad" name="image" >

    <!-- 显示上传之后的图片 -->

    <div id='previewImg'>

        <img src="" id='viewImg'/>

    </div>

</body>

</html>

第二种：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

<input type="file"><br>

<img src="" height="200" alt="Image preview area..." title="preview-img">

<script>

  var fileInput = document.querySelector('input[type=file]'),

          previewImg = document.querySelector('img');

  fileInput.addEventListener('change', function () {

      var file = this.files[0];

      var reader = new FileReader();

      // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片

      reader.addEventListener("load", function () {

          previewImg.src = reader.result;

      }, false);

      // 调用reader.readAsDataURL()方法，把图片转成base64

      reader.readAsDataURL(file);

  }, false);

</script>

</body>

</html>

　　

HTML添加上传图片并进行预览的更多相关文章

  1. OSS上传图片无法在线预览的解决方案

    OSS上传图片无法在线预览的解决方案 最近在做的项目涉及到商品详情,由于前端用的flutter框架并且该详情为富文本,dart语言关于富文本的组件不是非常友好,当富文本中的图片无法在浏览器中直接预览的 ...

  2. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  3. javascript和HTML5上传图片之前实现预览效果

    一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...

  4. 基于jquery实现的上传图片及图片预览效果代码

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  5. 【android学习3】解决Android界面布局添加EditView之后无法预览问题

    在设计登陆界面时,拖入一个EditView之后发现界面无法预览 问题分析: 进入xml源文件里发现一个警告,提示添加inputType或者hint元素,添加后界面仍然无法预览... 仔细查看了当前使用 ...

  6. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  7. JS 上传图片时实现预览

    网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...

  8. （干货）微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  9. 原生js上传图片时的预览

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. 6，Flask 中内置的 Session

    Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from ...

  2. ListView, GirldList 等setCurrentItem 不立即刷新

    有时候,你调用了adapter的setCurrentItem,然后立马就去获得第一个view的坐标,那么你获取的不是最新的. 要知道程序的并行性.程序运行很快,所以,延迟200s去得到第一个view的 ...

  3. 剑指Offer - 九度1387 - 斐波那契数列

    剑指Offer - 九度1387 - 斐波那契数列2013-11-24 03:08 题目描述: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项.斐波那契数列的定义如下: ...

  4. Python 实现MD5加密

    from hashlib import md5 def encrypt_md5(s): # 创建md5对象 new_md5 = md5() # 这里必须用encode()函数对字符串进行编码,不然会报 ...

  5. Linux忘记root密码的解决办法

    这里以centos6为例: 第一步:先将系统重新启动,在读秒的时候按下任意键就会出现如下图的菜单界面: 第二步:按下『e』就能够进入grub的编辑模式,如图: 第三步:将光标移动到kernel那一行, ...

  6. Java访问修饰符（控制属性或方法在哪些范围内可见）

    default:不加控制符的时候,就是default,只能在本包内访问 public:公有的,在本类之外其他类中可以访问,不在本包内也可以访问 private:私有的,在本类之外其他类不能访问 pro ...

  7. Windows后续处理工作

    1.远程桌面开启,应预先开启windows防火墙,并放行“远程桌面”(TCP 3389)端口,防止用户自行开启防火墙时操作错误. 2.防火墙高级安全-需放行ICMP 3.补丁更新,更新完重启 4.本地 ...

  8. [g2o]C++图优化库

    g2o以图模型表达上述最小二乘问题:比较适合解决SLAM问题 http://openslam.org http://wiki.ros.org/g2o

  9. java 用Arrays.binarySearch解读 快速定位数字范围

    在一些时候,需要用给一个数字找到适合的区间,Arrays.binarySearch可达到这个目的. static int binarySearch(int[] a, int key)          ...

  10. POJ A-Wireless Network

    http://poj.org/problem?id=2236 An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated ...