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

使用说明：新建文件，直接复制粘贴，保存文件为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()方法，把图片转成base64reader.readAsDataURL(file);}, false);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/YLQBL/p/8269581.html

HTML添加上传图片并进行预览相关推荐

EasyUI上传图片，前台预览，后台读取
背景 Spring MVC + EasyUI 前台上传图片,并预览下面是jsp的内容,form表单 java <form id="upload_form" enctype= ...
java 上传图片，图片预览，2种方法
java 上传图片,图片预览,2种方法 1. 方法一:将图片上传到特定磁盘 html页面,form表单内容: <div class="layui-form-item"> ...
OSS上传图片无法在线预览的解决方案
OSS上传图片无法在线预览的解决方案参考文章: (1)OSS上传图片无法在线预览的解决方案 (2)https://www.cnblogs.com/tian874540961/p/12058544.h ...
SupeSite后台添加新闻增加【预览】功能
SupeSite后台添加新闻增加[预览]功能实现目的:为了添加新闻时候更方便! 实现原因:添加新闻时候可能有些样式会出现错误,生成静态页之后再去看的时候会比较浪费时间. 实现步骤: 1.在后台找到a ...
vue上传图片二（预览、限制大小）
vue上传图片时预览图片前言: 图片上传时所伴随的场景之一对选择的图片在页面上先呈现出来,在此处记录一下该场景功能介绍:图片预览.限制大小(5M).重新选择图片辅助:element-ui 组件库 ...
element upload预览_vue+element上传图片并显示预览图
html代码: :show-file-list="false" :on-success="handleAvatarSuccess" :on-change=&qu ...
anguarjs 上传图片预览_JS控制上传图片个数，预览上传图片
一共是2个函数 //这个函数的作用预览上传的图片 function fileView(filesObj){ //显示上传图片预览 var view=document.querySelector(&qu ...
android 信息添加附件功能,网易邮箱Android新版添加附件可直接预览
网易邮箱Android客户端近日发布了新版本V2.3,新版安卓客户端对附件处理做出较大改进.用户转发邮件附件时,不需要下载到本地实现直接转发,更加方便:写信时,添加附件由原先的列表形式变成预览图形式, ...
php ajax多图上传预览,Ajax上传图片及先预览功能的实现方法
最近有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果, ...

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

HTML添加上传图片并进行预览相关推荐

最新文章

热门文章