8种机械键盘轴体对比
本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？
几个上传插件的分析对比
下面是我整理的几个插件的分析对比数据，只选择几项展开说明，仅供参考。项目UploadifyPlupload2.3.1DropZone.jsFine 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、使用接口控制外观
(Uploadify有flash和html5两个版本，flash对IE兼容性较好，IE的7、8、9 不支持html5的File API 和xhr2使用FormData)
相关 API 详解
XMLHttpRequest Level2设置请求的超时时间1
2
3
4
5
6
7var xhr=new XMLHttpRequest();
xhr.timeout=1000;//(ms)
xhr.ontimeout=function(e){}接收二进制数据1
2
3xhr.responseText='blob'//或ArrayBuffer数组 二进制;
var blob = new Blob([xhr.response], {type: ''});进度
监听progress事件，需要注意的是，上传的progress属于XMLHttpRequest.upload对象，下载的progress属于XMLHttpRequest对象1
2
3
4
5
6
7
8xhr.upload.οnprοgress=function(e){
if(e.lengthComputable){
//lengthComputable是一个表示进度信息是否可用的布尔值
//loaded表示已经接收的字节数，total表示根据Content-Length响应头部确定的预期字节数。
var percent=e.loaded/e.total;
console.log(percent);
}
}终止
方法：abort()
事件：onabort其它事件(IE9+)
loadstart 当接收到数据的第一个字节时触发
error 发生错误时触发
load 接收到完整数据时触发
loadend 在通信完成或者触发error、abort或load事件后触发
FileList1//IE10+ 支持multiple属性
当没有multiple属性时，FileList的长度为1，需要注意的是FileList对象不能在js中直接访问
File
继承Blob对象的所有属性和方法 所有属性均为只读属性lastModified 最后的修改时间 时间戳 IE10+
lastModifiedData 不再提倡使用，但是还可以使用
name 文件名 IE11+
size 文件大小 IE11+
type 文件类型
slice(start，end);
FileReaderreadyStateEMPTY 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() 中止读操作
实现部分功能的思路xhr2新增了formData接口，可以通过js用一些键值对来模拟一系列表单控件。使用FormData的最大优点就是可以异步上传二进制文件，二进制文件一般除文本文件外的图形文件、可执行文件等。设置enctype=”multipart/form-data”,可上传二进制数据，用于表单里有图片上传。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传。
非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
var dropZone=document.getElementById("mylist");
dropZone.οndrοp=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对象
var myfile=document.getElementById("myfile"),
img=document.getElementById("img"),
reader=new FileReader();
myfile.οndrοp=function(e){
var url="";
reader.readAsDataURL(e.dataTransfer.files[0]);
reader.onload = function(evt){
url = evt.target.result;
img.setAttribute("src",url);
}
}
进度条1
2
3
4
5
6
7
8
9
10var xhr=new window.XMLHttpRequest();
xhr.upload.οnprοgress=function(e){
if(e.lengthComputable){
//lengthComputable是一个表示进度信息是否可用的布尔值
//loaded表示已经接收的字节数，total表示根据Content-Length响应头部确定的预期字节数。
var percent=e.loaded/e.total;
console.log(percent);
}
}
压缩上传读取数据
创建一个image对象，监听他的onload事件
根据压缩比例算出宽高
使用canvas将图片画出来按照此宽高画出来
使用toDataURL读取成base64数据的形式上传(怎样上传)
上传
base64数据的形式是这种形式的:data:image/png;base64,someString….1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17function (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
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
