H5图片上传和预览

10人阅读 评论(0) 收藏 举报
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="file" multiple class="file" accept="image/*">
  <img src="" alt="">
  <button>点击上传</button>
</body>
<script>
  var eleFile = document.querySelector('.file');
  var image = document.querySelector("img")
  var button = document.querySelector("button")
  // 压缩图片需要的一些元素和对象
  var targetWidth, targetHeight
  var reader = new FileReader(),
  img = new Image();

  // 选择的文件对象
  var file = null;

  // base64地址图片加载完毕后
  img.onload = function () {
    // 图片原始尺寸
    var originWidth = this.width;
    var originHeight = this.height;
    // 最大尺寸限制
    var maxWidth = 600,
      maxHeight = 500;
    // 目标尺寸
    targetWidth = originWidth,
      targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > maxWidth / maxHeight) {
        // 更宽,按照宽度限定尺寸
        targetWidth = maxWidth;
        targetHeight = Math.round(targetWidth* (originHeight / originWidth));
      } else {
        targetHeight = maxHeight;
        targetWidth = Math.round(targetHeight* (originWidth / originHeight));
      }
    }
    image.width = targetWidth
    image.height = targetHeight
  };

  // 文件base64化,以便获知图片原始尺寸
  reader.onload = function (e) {
    img.src = e.target.result;
    image.src = e.target.result
  };
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // 选择的文件是图片
    if (file.type.indexOf("image") == 0) {
      reader.readAsDataURL(file);
    }
  });
  button.addEventListener('click', function () {
    if (!file) {
      return
    }
    var formData = new FormData()
    formData.append(file.name, file)
    uploadImage(formData)
  })

  function uploadImage(formdata) {
    // ....调用ajax上传图片
  }
</script>

</html>

查看评论

关于H5里的API,上传图片预览功能

请选择一个图像文件:    选择图片的input按钮     var aaa = document.getElementById("rrr"); //获取显示图片的div元素 ...
  • liuqiao1123
  • liuqiao1123
  • 2016-04-15 14:17:46
  • 1773

H5图片预览及上传(WEB前端)

H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧。 一、html布局文件 html有一个自己的...
  • u014155882
  • u014155882
  • 2017-02-06 11:18:44
  • 4580

h5多张图片上传预览

代码实例://html:&amp;lt;div id=&quot;container&quot;&amp;gt;    &amp;lt;div class=&quot;shangchuan&quo...
  • baidu_38027860
  • baidu_38027860
  • 2018-03-15 10:10:39
  • 32

图片上传加预览(H5)

  • 2016年03月16日 19:32
  • 66KB
  • 下载

h5实现上传图片本地预览

  • 2018年02月23日 09:42
  • 1KB
  • 下载

html5图片上传与预览实现

最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式。图片预览首先,解决图片预览问题。在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览功能...
  • a4307515
  • a4307515
  • 2016-01-12 16:38:53
  • 38686

H5实现多图片预览上传,可点击可拖拽控件介绍

在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用。 先看看他的样式: ...
  • weixin_36380516
  • weixin_36380516
  • 2017-04-22 10:23:50
  • 4783

html5移动端图片上传本地生成缩略图预览(单图上传)

  • 2015年11月19日 14:58
  • 38KB
  • 下载

JS+html5实现图片上传预览

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。FileReader的使用方式非常简单...
  • qq_26291823
  • qq_26291823
  • 2016-01-10 15:02:35
  • 1796
    个人资料
    等级:
    访问量: 791
    积分: 110
    排名: 116万+
    文章分类