使用说明：新建文件，直接复制粘贴，保存文件为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. Android面试收集录16 Android动画总结

    一.Android 动画分类 总的来说,Android动画可以分为两类,最初的传统动画和Android3.0 之后出现的属性动画: 传统动画又包括 帧动画(Frame Animation)和补间动画( ...

  2. Android面试收集录3 ContentProvider详解

    1.ContentProvider简单介绍 1.1.定义 ContentProvider,即内容提供者属于Android的四大组件之一. 1.2.作用 进程间进行数据交互&共享,即跨进程通信. ...

  3. 2 Mongodb基本操作

    1.基本操作 MongoDB将数据存储为一个文档,数据结构由键值(key=>value)对组成 MongoDB文档类似于JSON对象,字段值可以包含其他文档.数组.文档数组 安装管理mongod ...

  4. PowerDesigner如何将一个包里的表拷贝到另一个表以后在视图中也可以显示？

    第一步:选中PhysicalDiagram_1 第二步:点击:“ Symbol”按钮, 第三步:点击“Show Symbols”,出现如下界面 第四步:选中State.  

  5. 剑指Offer - 九度1505 - 两个链表的第一个公共结点

    剑指Offer - 九度1505 - 两个链表的第一个公共结点2013-11-24 20:09 题目描述: 输入两个链表,找出它们的第一个公共结点. 输入: 输入可能包含多个测试样例.对于每个测试案例 ...

  6. DOS程序员手册（九）

    第14章参考手册概述     本书余下的章节将向读者们介绍BIOS.DOS各种各样API函数和服务,作为一名程 序员,了解和掌握这些知识是很有好处的.在所介绍的参考手册中,每部手册都汇集了大 量的资源 ...

  7. linux下给开启端口

    首先在这里要推荐一篇博文 http://blog.csdn.net/zht666/article/details/17505789 这篇文章写的很详细,里面包含了操作端口一些命令,我们操作端口其实就是 ...

  8. iphone 8 plus 红色特别版，突然自动关机无法启动

    今天早上我的iphone 8p 突然自己在床上闪动开机图标,闪了半个多小时它就光荣的自动关机了,我尝试了长按开机键,长按home+开机键15秒,通通木有用,它就是没!反!应! 于是找了售后,学到了正确 ...

  9. Djano之写api使用django_rest_framework【海瑞博客】

    使用django rest framework 可以更快速和友好的编写api,当然网上有很多教程,对于高手来说相对很简单,对于新手来说,根本搞不明白.那是你没有搞明白你自己的职责,做为后端,我们只要提 ...

  10. python 多版本的兼容

    1.针对linux版本 linux版本的话,首先调用whereis python 来获取到多版本的路径. root@Ulord-14:~# whereis pythonpython: /usr/bin ...