先看几个对象：
Blob、ArrayBuffer、File、fileReader、formData

详细解释请参考：https://www.cnblogs.com/youhong/p/10875190.html

文件上传必用表单<form></form>：

1、获取表单信息
2、转为base64
3、压缩base64通过canvas
4、把base64转为文件对象
5、AJAX提交信息

https://blog.csdn.net/Clara_G/article/details/87936853

js实现图片预览、压缩、上传的更多相关文章

  1. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  2. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  3. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  4. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. js多图预览及上传功能

    <%-- Created by IntelliJ IDEA. User: Old Zhang Date: 2018/12/27 Time: 11:17 To change this templa ...

  6. 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  7. vue组件利用formdata图片预览以及上传《转载》

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  8. vue组件利用formdata图片预览以及上传

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  9. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  10. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

随机推荐

  1. 关于JAVA的环境变量和那些jar包

    大家配置环境变量一般都是 JAVA_HOME:C:\Program Files (x86)\Java\jdk1.6.0_30; PATH:%JAVA_HOME%\bin; CLASSPATH:.;%J ...

  2. COALESCE 函数作用

    用途. 将空值替换成其他值 返回第一个非空值. 任意一个不为空的值.比较有用.

  3. 学习contiki需要知道的一些概念和注意事项

    概念: 1.宏:所谓宏,就是一些命令组织在一起,作为一个单独命令完成一个特定任务.Microsoft Word中对宏定义为:“宏就是能组织到一起作为一独立的命令使用的一系列word命令,它能使日常工作 ...

  4. LeetCode6 dp

    120. Triangle 我的解法用了一个二维数组,这样比较浪费空间.O(n*n) 但是标准答案自底向上,一是不需要进行特别判断,二是可以覆盖数组,则只需要O(n)的空间大小. class Solu ...

  5. matplotlib系列——饼图

    import matplotlib.pyplot as plt import numpy as np import matplotlib import sys 1.主体函数 #饼图 def die(l ...

  6. NOIP后一波总结

    我的山寨较为可靠分数为305(洛谷是真的水~显然不能用啊,果断换了一组合适的数据) 据大神们估计,得奖的分数在280, 我肯定是没有啥希望了.(我旁边的lxy同学从初二开始,每次以超分数线至少60分的 ...

  7. iview 分割面板效果（一）基本原理

    方法一: 基本点就是:利用“子绝父相(子元素相对于父元素进行定位)”, 左侧的pane设置为left:0;right:a%, 则右侧的设置为right:0;left:(100-a)%. 如果左右之间有 ...

  8. css字体的样式与分类用法总结

    字体的样式 color 设置文本的颜色(前景色) ,它会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖. <style> .box1 { color: ...

  9. elasticsearch 嵌套对象之嵌套类型

    nested类型是一种特殊的对象object数据类型(specialised version of the object datatype ),允许对象数组彼此独立地进行索引和查询. 1. 对象数组如 ...

  10. 三、Json方式函数

    一.Json方式函数 // 4. 查看对象信息 console.dir(obj) =>可以显示一个对象所有的属性和方法. var info = { blog: "http://cllg ...