使用说明：新建文件，直接复制粘贴，保存文件为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. PCB工艺要求

    项目 加工能力 工艺详解   层数 1~6层 层数,是指PCB中的电气层数(敷铜层数).目前嘉立创只接受1~6层板.   板材类型 FR-4板材 板材类型:纸板.半玻纤.全玻纤(FR-4).铝基板,目 ...

  2. 干货100+ 最超全的web开发工具和资源大集合

    干货100+ 最超全的web开发工具和资源大集合   作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...

  3. 【Regularization】林轩田机器学习基石

    正则化的提出,是因为要解决overfitting的问题. 以Linear Regression为例:低次多项式拟合的效果可能会好于高次多项式拟合的效果. 这里回顾上上节nonlinear transf ...

  4. Visual Studio使用技巧笔记（引用程序集自动复制dll到引用项目目录）

    copy /y $(TargetPath) $(SolutionDir)\[您项目引用dll文件的目录]\$(TargetFileName) 例如:copy /y $(TargetPath) $(So ...

  5. SVN迁移到Git原因说明

    1.Git分布式的源码管理 每位开发人员计算机本地会有一份代码库,开发人员可在不受其他人代码提交影响的前提下对源码进行提交/回滚/撤销等操作. 在独立的开发任务中即可实现对源码管理又不受其他开发人员提 ...

  6. ASP.NET Core [4]: Authentication(笔记）

    原文连接:http://www.cnblogs.com/RainingNight/p/authentication-in-asp-net-core.html 在现代应用程序中,认证已不再是简单的将用户 ...

  7. 最干净的pyinstaller打包成exe应用程序方法

    在anaconda环境下进行pyinstaller打包后,程序非常大,70行代码打包后有280MB,这是因为会将conda环境携带的库都打包进去导致的.为了获得更纯净的包环境,我们需要安装纯pytho ...

  8. python使用工具简介介绍

    我从研究生开学以来就开始在学python,现在来简单分享下一些基本的使用命令和快捷方式 Pycharm: 运行程序 ctrl+alt+F10 删除一行ctrl+D 注释ctrl+/ 安装python所 ...

  9. BETA（1）

    目录 组员情况 组员1(组长):胡绪佩 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示组内最新成果 团 ...

  10. 当发送ICMP包的时候不一定能收得到（arp已经应答了）【复现不了了】

    arp已经应答了,然后再返回ICMP应答的时候竟然不被回复. 其实这里想想也很容易想清楚: 虽然arp给了回复,但是真正到ICMP报文到的时候,我理解报文到的时候,我理解还是要进行与本地网络兑换的,本 ...