HTML添加上传图片并进行预览

Wesley13
• 阅读 474

使用说明:新建文件,直接复制粘贴,保存文件为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>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Wesley13 Wesley13
3年前
DOM查询
1<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"2<html3<head4<metahttpequiv"ContentType"
Wesley13 Wesley13
3年前
HTML嵌百度地图
<!DOCTYPEhtmlPUBLIC"//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"<html<head<metahttpequiv"ContentType"content"text/html;chars
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
DOM操作节点对象集合
<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"<html<head<metahttpequiv"ContentType"content"text/h
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这