概述

最近需求上需要实现图片上传的功能,简单记录下实现过程。目前实现的功能比较简单,主要有以下几点:

  • 图片预览
  • 图片删除
  • 拖拽上传
  • 压缩上传

移动端实现方案:使用File API

主要使用到 FileList、File、FileReader、canvas、拖放API

FileList对象

一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件。当用户通过file控件选取文件后,这个控件的files属性值就是FileList对象。它在结构上类似于数组,包含用户选取的多个文件。

通过表单控件获取FileList对象

通过监听onchange事件,选择图片后,可以通过files属性获取图片信息,其中accept属性为接收到文件格式,multiple 属性设置后支持选择多个文件。

    <input type="file" name="demo" accept="image/jpeg,image/png" onchange="console.log(this.files.length)" multiple>

通过拖放获取FileList对象

DataTransfer对象是用于保存在一次拖放操作的被拖动的数据。通过DataTransfer.files属性可以获取所有在数据传输中可用的本地文件的列表。具体查看DataTransfer API拖放API

File对象

File API提供File对象,它是FileList对象的成员,包含了文件的一些元信息,比如文件名、上次改动时间、文件大小和文件类型。File对象文档。File对象的属性值如下:

  • name:文件名,该属性只读。
  • size:文件大小,单位为字节,该属性只读。
  • type:文件的MIME类型,如果分辨不出类型,则为空字符串,该属性只读。
  • lastModified:文件的上次修改时间,格式为时间戳。
  • lastModifiedDate:文件的上次修改时间,格式为Date对象实例。

    例如:
<input type="file" name="demo" accept="image/jpeg,image/png" onchange="upload()" multiple>
<script>
function upload(){
var file = document.querySelector('input').files[0];
document.writeln(file.name);
document.writeln(file.size);
document.writeln(file.type);
document.writeln(file.lastModified);
document.writeln(file.lastModifiedDate);
}
</script>
// 13910DAB-D0EC-4DE6-8876-CFAF9EDA3086.png
// 28345
// image/png
// 1500826120000
// Mon Jul 24 2017 00:08:40 GMT+0800 (CST)

FileReader 对象

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,它的参数是File对象或Blob对象。对于不同类型的文件,FileReader提供不同的方法读取文件。以下是相关方法及事件。详细查看api

方法

  • readAsBinaryString(Blob|File):返回二进制字符串,该字符串每个字节包含一个0到255之间的整数。
  • readAsText(Blob|File, opt_encoding):返回文本字符串。默认情况下,文本编码格式是’UTF-8’,可以通过可选的格式参数,指定其他编码格式的文本。
  • readAsDataURL(Blob|File):返回一个基于Base64编码的data-uri对象。
  • readAsArrayBuffer(Blob|File):返回一个ArrayBuffer对象。

事件处理

  • Onabort :读取操作被中止时调用.
  • Onerror :当读取操作发生错误时调用.
  • Onload :当读取操作成功完成时调用.
  • Onloadend :当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
  • Onloadstart:当读取操作将要开始之前调用.
  • Onprogress :在读取数据过程中周期性调用.

创建一个FileReader对象

    let reader = new FileReader();

readAsDataURL 读取图片

readAsDataURL方法返回一个data URL,它的作用基本上是将文件数据进行Base64编码。你可以将返回值设为图像的src属性。

        <div class="imgPreview">
<img src="" width="100" height="100">
</div>
<input type="file" name="demo" accept="image/jpeg,image/png" onchange="upload()" multiple>
<script>
function upload(){
var file = document.querySelector('input').files[0];
var reader = new FileReader();
reader.onload = function(e){
// onload事件的回调函数接受一个事件对象,该对象的target.result就是文件的内容
document.querySelector('img').src = e.target.result;
};
reader.readAsDataURL(file);
} </script>

浏览器兼容性

IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.

第三方组件

需要兼容PC端可以使用webuploader组件

http://fex.baidu.com/webuploader/

参考资料

浅析H5图片上传的更多相关文章

  1. vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...

  2. H5 图片上传

    1.h5 图片异步上传 (1) 异步上传input触发onchange事件的时候,就把图片上传至服务器.后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看. (2) 另一种情况可能需要前台 ...

  3. h5图片上传预览与拖拽上传

    图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. H5图片上传插件

    基于zepto,支持多文件上传,进度和图片预览,用于手机端. (function ($) { $.extend($, { fileUpload: function (options) { var pa ...

  5. h5图片上传预览

    项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html < ...

  6. h5图片上传简易版(FileReader+FormData+ajax)

    一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为 ...

  7. H5图片上传、压缩

    1.注册input file标签的onchange事件: 2.检查图片格式: 3.检查图片大小: 4.压缩图片 5.上传图片至服务器: 前端代码: document.getElementById('i ...

  8. h5 图片上传旋转问题

    https://blog.csdn.net/netdxy/article/details/51518494 https://www.cnblogs.com/liu-fei-fei/p/5974403. ...

  9. input file图片上传

    <div class="div-title"> <h5>图片上传</h5> <div class="photo-box" ...

随机推荐

  1. ACM Computer Factory POJ - 3436 网络流拆点+路径还原

    http://poj.org/problem?id=3436 每台电脑有$p$个组成部分,有$n$个工厂加工电脑. 每个工厂对于进入工厂的半成品的每个组成部分都有要求,由$p$个数字描述,0代表这个部 ...

  2. 【翻译】Chemkin - Chapter 1

    [这段文字是2013年3月翻译的,整理老文档时发现就拿出来,提醒我们:任何试图翻译英文手册的尝试都是徒劳的] 第一章   介绍 Chemkin理论手册提供了一个对关系和公式的宽泛的概览,这些关系和公式 ...

  3. (常用)configparser,hashlib,hamc模块

    configparser模块 #专门解析my.ini这种形式的文件(cnf) import configparser  config=configparser.ConfigParser()  conf ...

  4. Python-视图 触发器 事务 存储过程

    1.视图2.触发器*** 在某个时间发生了某个事件时 会自动触发一段sql语句3.事务*****4.存储过程***** 5.函数6.备份与恢复*** mysqldump -u -p (库名 [表名] ...

  5. 如何快速定位找出SEGV内存错误的程序Bug

    通过查看php日志/usr/local/php/var/log/php-fpm.log,有如下警告信息: [16-Mar-2015 16:03:09] WARNING: [pool www] chil ...

  6. Java中关于string的些许问题及解析

    问题一:String 和 StringBuffer 的区别JAVA 平台提供了两个类: String 和 StringBuf fer ,它们可以储存和操作字符串,即包含多个字符的字符数据.这个 Str ...

  7. Oracle 高水位说明和释放表空间,加快表的查询速度

    高水位的介绍 数据库运行了一段时间,经过一些列的删除.插入.更改操作有些表的高水位线就有可能和实际的表存储数据的情况相差特别多,为了提高检索该表的效率,建议对这些表进行收缩: 查找高水位线的表 查找表 ...

  8. (一)python 数据模型

    1.通过实现特殊方法,自定义类型可以表现的跟内置类型一样: 如下代码,实现len, getitem,可使自定义类型表现得如同列表一样. import collections from random i ...

  9. 最短路径之Bellman-Ford算法

    第一行为源点个数,边的个数m 接下来m行为a->b和权值 5 52 3 21 2 -31 5 54 5 23 4 3 Bellman-Ford算法(1): #include<iostrea ...

  10. js中json对象数组按对象属性排序---1

    转载:https://www.cnblogs.com/jasonwang2y60/p/6656103.html 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据js ...