使用说明：新建文件，直接复制粘贴，保存文件为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. 为什么rows这么大，在mysql explain中---写在去acumg听讲座的前一夜

    这周五下班前,发现了一个奇怪问题,大概是这个背景 一张表,结构为 Create Table: CREATE TABLE `out_table` ( `id` ) NOT NULL AUTO_INCRE ...

  2. 【Max Points on a Line 】cpp

    题目: Given n points on a 2D plane, find the maximum number of points that lie on the same straight li ...

  3. CocosCreator设置模拟器默认横竖屏以及机型

    之前好好的横屏,今天不知道为毛突然变成竖屏了,虽然可以在点击模拟器左上角进行设置,   但是 每次启动模拟器又变成竖屏了,折腾了很久,终于找到了设置的地方,记录下:        

  4. linux部署环境配置

    https://blog.csdn.net/dsczxcc/article/details/78728330

  5. 孤荷凌寒自学python第二十九天python的datetime.time模块

     孤荷凌寒自学python第二十九天python的datetime.time模块 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) datetime.time模块是专门用来表示纯时间部分的类. ...

  6. Heat 如何来实现和支持编排

    编排 编排,顾名思义,就是按照一定的目的依次排列.在 IT 的世界里头,一个完整的编排一般包括设置服务器上机器.安装 CPU.内存.硬盘.通电.插入网络接口.安装操作系统.配置操作系统.安装中间件.配 ...

  7. python 由递归的dict构建树的画图代码

    createPlot(mytree)方法实现. 其中myTree是一个字典,调用retrieveTree(0)可以获得一个字典的样式. Last login: Thu Feb 23 19:07:53 ...

  8. NodeJs03 express框架 Todo商城

    前言 由于NodeJs本身的异步非阻塞特性和对http的天然支持,所以使用NodeJs编写高性能,可伸缩的Web服务器非常简单.开发完整的Web服务器还需要路由,错误处理,请求拦截,请求和响应的解析, ...

  9. linux 出错 “INFO: task xxxxxx: 634 blocked for more than 120 seconds.”的3种解决方案（转）

    linux 出错 “INFO: task xxxxxx: 634 blocked for more than 120 seconds.”的3种解决方案 1 问题描述 服务器内存满了,ssh登录失败 , ...

  10. maven学习（十七）——在eclipse中导入外部maven项目

    外部maven项目,导入Eclipse中进行开发 操作步骤如下所示: