HTML5+PHP文件上传学习笔记

文件上传 PV:

几个上传插件的分析对比

下面是我整理的几个插件的分析对比数据，只选择几项展开说明，仅供参考。

项目 Uploadify Plupload2.3.1 DropZone.js Fine Uploader5.15.0
兼容性 IE 8+ IE 6+ IE 10+ IE 8+
多文件 支持 支持 支持 IE10+
图片预览 不支持 不支持 支持 支持（IE 10+）
拖拽上传 html5版本支持 仅html5版支持
chrome21+支持文件夹		 支持 支持（甚至chrome和opera15+中的文件夹）
大文件 分块上传 分块上传
自动上传 支持 不支持 不支持 支持
进度条 有 无 无 可自定义（IE10+）
功能亮点 1、flash和html5两个版本
2、可更改上传的文件名
3、由接口参数和CSS控制外观
4、高度可定制		 1、自动侦测环境，
多种上传方式，兼容性好。
2、支持自动重试
3、依赖自由
4、图片上传前压缩
5、多文件队列上传		 1、全面的事件处理选项
2、依赖自由
3、可删除已上传的文件		 1、自动重传
2、暂停\恢复上传(IE10+)
3、删除已上传文件
4、粘贴上传（chrome,opera15+）
5、无服务器上传
6、提供服务器脚本或自定义
7、使用接口控制外观
下载地址 http://www.uploadify.com/ http://www.plupload.com/ http://www.dropzonejs.com/ https://fineuploader.com/

(Uploadify有flash和html5两个版本，flash对IE兼容性较好，IE的7、8、9 不支持html5的File API 和xhr2使用FormData)

相关 API 详解

XMLHttpRequest Level2

  1. 设置请求的超时时间
1
2
3
4
5
6
7
var xhr=new XMLHttpRequest();

//IE new ActiveXObject('Microsoft.XMLHTTP');

xhr.timeout=1000;//(ms)

xhr.ontimeout=function(e){}
  1. 接收二进制数据
1
2
3
xhr.responseText='blob'//或ArrayBuffer数组 二进制;

var blob = new Blob([xhr.response], {type: ''});
  1. 进度

​ 监听progress事件，需要注意的是，上传的progress属于XMLHttpRequest.upload对象，下载的progress属于XMLHttpRequest对象

1
2
3
4
5
6
7
8
xhr.upload.onprogress=function(e){
	if(e.lengthComputable){
	//lengthComputable是一个表示进度信息是否可用的布尔值
	//loaded表示已经接收的字节数，total表示根据Content-Length响应头部确定的预期字节数。
	 var percent=e.loaded/e.total;
	 console.log(percent);
	}	
}

  1. 终止

    方法：abort()

    事件：onabort

  1. 其它事件(IE9+)

    loadstart 当接收到数据的第一个字节时触发

    error 发生错误时触发

    load 接收到完整数据时触发

    loadend 在通信完成或者触发error、abort或load事件后触发

FileList

1
<input type="file" multiple="multiple"/>	//IE10+ 支持multiple属性

当没有multiple属性时，FileList的长度为1，需要注意的是FileList对象不能在js中直接访问

File

继承Blob对象的所有属性和方法 所有属性均为只读属性

  • lastModified 最后的修改时间 时间戳 IE10+

  • lastModifiedData 不再提倡使用，但是还可以使用

  • name 文件名 IE11+

  • size 文件大小 IE11+

  • type 文件类型

  • slice(start，end);

FileReader

  • readyState

    EMPTY    0    尚未加载数据。
LOADING    1    数据正在加载。
DONE    2    整个读取请求已经完成。

  • error 读取文件时发生的错误

  • result 文件的内容

  • 事件处理程序

    (1) loadstart 开始读取时

    (2) progress 读取时

    (3) abort 中止时

    (4) error 发生错误时

    (5) load 读取操作成功时

    (6) loadend 读取完成（成功或失败）时

  • 方法

    (1) readAsDataURL()

    (2) readAsText()

    (3) readAsArrayBuffer()

    (4) abort() 中止读操作

实现部分功能的思路

  1. xhr2新增了formData接口，可以通过js用一些键值对来模拟一系列表单控件。使用FormData的最大优点就是可以异步上传二进制文件，二进制文件一般除文本文件外的图形文件、可执行文件等。设置enctype=”multipart/form-data”,可上传二进制数据，用于表单里有图片上传。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传。

  2. 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，可以将图片转换为base64编码。

多文件上传

多文件上传源码，后台使用$_FIlES对上传结果遍历，并将这些临时文件移动到保存上传图片的文件夹的操作，在此不做详细说明。

文件分块上传

defmain 前辈的文章PHP搭建大文件切割分块上传功能 提供了一个一个很好的思路。

前端主要是利用html5的File API 的slice方法对文件进行分割，使用 xhr2的FormData对象构造上传数据。

拖放上传

这里使用到了HTMl5 拖放的API DataTransfer对象

(1) DataTransfer.files包含数据传输上可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性是空列表。

(2) DataTransfer.types 只读 strings提供在dragstart事件中设置的格式的数组。

1
2
3
4
5
6
7
<input id="mylist" type="file"/>

var dropZone=document.getElementById("mylist");

dropZone.ondrop=function(e){
   console.log(e.dataTransfer.files[0]);
}

图片预览

​ 使用html5的FileReader读取本地文件，包括readAsText(),readAsDataURL(),readAsArrayBuffer()三个方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//创建一个FileReader对象
<input id="myfile" type="file"/>
 <img src="" id="img"/>

 var myfile=document.getElementById("myfile"),
     img=document.getElementById("img"),
     reader=new FileReader();


 myfile.ondrop=function(e){
    var url="";

    reader.readAsDataURL(e.dataTransfer.files[0]);
    reader.onload = function(evt) {
        url = evt.target.result;
        img.setAttribute("src",url);
    }  
 }

进度条

通过监听 xhr.upload.onprogress实现上传进度条效果。

1
2
3
4
5
6
7
8
9
10
var xhr=new window.XMLHttpRequest();
xhr.upload.onprogress=function(e){
	if(e.lengthComputable){
	//lengthComputable是一个表示进度信息是否可用的布尔值
	//loaded表示已经接收的字节数，total表示根据Content-Length响应头部确定的预期字节数。
	 var percent=e.loaded/e.total;
	 console.log(percent);
	}
	
}

压缩上传

  1. 读取数据

    创建一个image对象，监听他的onload事件

    根据压缩比例算出宽高

    使用canvas将图片画出来按照此宽高画出来

    使用toDataURL读取成base64数据的形式上传（怎样上传）

  2. 上传

    base64数据的形式是这种形式的:data:image/png;base64,someString….

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);//老版本的做法 还原成二进制的字符
    }
    return new Blob([ab], {type: mimeString});
}

var fd = new FormData();
var blob = dataURItoBlob(dataURL);
fd.append('file', blob);

上传时
data:fd

Copyright © 2018 - 2019 诗之花绪 All Rights Reserved.

UV : | PV :