上传文件的预览及基本文件信息的获取

这是第二次写东西，写了上一篇随笔后，就好像有了第一笔存款，心里美美的，哈哈哈。

这段时间做的需求都是跟上传有关的，比如上传图片呀（各种尺寸，各种裁剪，各种要求），视频(选择文件后先在页面预览，然后才上传)，音频，pdf，ppt，做一下总结。

本文的上传都是通过input type="file"标签实现的上传。

一、上传前的预览

上传图片（视频音频）时，还没有调接口保存入库，需要本地预览一下图片（音视频）的效果。

宝宝知道的方法有两种：

1.将文件转换成base64编码的东东，然后插入src属性中。

$('input[type="file"]').on('change', function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file); //读取此文件的File对象
  reader.onload = function(e) {
    e.target.result//result属性将包含一个data:URL格式的字符串（base64编码），以表示所读取问加你的内容，图片音视频直接插入相应标签的src属性中便可实现预览啦
  }
});

2.URL.createObjectURL()方法会根据传入的参数创建一个指向改参数对象的URL。

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

这个url的生命仅存在于它被创建的这个文档里。

语法：

objUrl = URL.createObjectURL();
URL(window.url || window.webkitURL ......)

然后将这个objUrl插入标签的src属性中即可

二、上传图片时获取图片的尺寸，大小，格式

1.文件的大小和格式在上传时的file文件里都有的

$('input[type="file"]').on('change', function() {
  var file = this.files[0];
  console.log(file);
  if (file.size > 1024 * 1024 * 2) {//这里的size是byte为单位的哦
    console.log("文件大小不能超过2M哦~");
    return false;
  }
  if (file.type != 'image/png') {
    console.log("仅支持png格式的图片哦~");
    return false;
  }
}）；

感觉快把学校学的基础知识忘光了，当时换算大小的时候写错了，差评！！！脸红地补充一下

字 word 
字节 byte 
位 bit 
字长是指字的长度

1字=2字节(1 word = 2 byte) （这里不一定哦）
1字节=8位(1 byte = 8bit)

1 Byte = 8 Bits

1 KB = 1024 Bytes

1 MB = 1024 KB

1 GB = 1024 MB

1PB（Petabyte 千万亿字节 拍字节）=1024TB，
1EB（Exabyte 百亿亿字节 艾字节）=1024PB，
1ZB (Zettabyte 十万亿亿字节 泽字节)= 1024 EB,
1YB (Jottabyte 一亿亿亿字节 尧字节)= 1024 ZB,
1BB (Brontobyte 一千亿亿亿字节)= 1024 YB.

2.文件的尺寸 

reader.readAsDataURL(file);
reader.onload = function(e) {
  var image = new Image();
  image.src = e.target.result;
  image.onload = function() {
    console.log(image.width);
    console.log(image.height);
  }
}

写这篇文章被打断了好几次，哈哈哈，不想写了

三、图片裁剪

这个插件有个问题，裁剪完一次后再次选择图片裁剪，图片一直是第一次选取的。解决办法是每次传入插件的dom都需要新建。

就先这样吧。

转载于:https://www.cnblogs.com/superil/p/7738673.html