if(window.FileReader){
var list = document.querySelector('#list'),
container = document.querySelector('#container');
//判断是否为图片
function isImage(type){
switch(type){
case 'image/jpeg':
case 'image/png':
case 'image/gif':
case 'image/bmp':
case 'image/jpg':
return true;
default:
return false;
}
}
//处理拖放文件列表
function handleFileSelect(evt){
//html5 drop evt.target指向拖拽容器
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
for(var i = 0, f;f = files[i]; i++){
//得到选择的file对象
var t = f.type ? f.type : 'n/a',
reader = new FileReader(),
looks = function(f, img){
list.innerHTML += '<li><strong>'+f.name+'</strong>('+ t +
')-' + f.size + 'bytes<p>' + img + '</p></li>'
container.innerHTML = img;
},
isImg = isImage(t),
img;
//处理得到的图片
if(isImg){
reader.onload = (function(theFile){
return function(e){
//重点 e.target 指向 Filereader对象
img = '<img class="preview" src="' + e.target.result + '" title="' + theFile.name + '"/>';
looks(theFile, img);
}
})(f)
reader.readAsDataURL(f);
} else {
img = '"o((>w<))o",你传进来的不是图片!!';
looks(f, img);
}
}
}
// 处理插入拖出效果
function handleDragEnter(evt){ this.setAttribute('style', 'border-style:dashed;'); }
function handleDragLeave(evt){ this.setAttribute('style', ''); }
// 处理文件拖入事件,防止浏览器默认事件带来的重定向
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
container.addEventListener('dragenter', handleDragEnter, false);
container.addEventListener('dragover', handleDragOver, false);
container.addEventListener('drop', handleFileSelect, false);
container.addEventListener('dragleave', handleDragLeave, false);
}
//input file 获取file对象
var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles(){
var fileList = this.files;
for( var i = 0 ; i < fileList.length ; i++ ){
console.log(fileList[i]);
}
}
实现上传的主要几个关键方法和对象:
html5 drag drop
取得file对象 var files = evt.dataTransfer.files;
FileList对象与file对象
FileList对象表示用户选择的文件列表。在HTML5中,通过在file控件中添加multiple属性,可以使用控件内一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象则为这些file对象的列表,代表用户选择的所有文件。file对象具有两个属性:name属性表示文件夹名(不包含路径);lastModifiedDate属性表示文件的最后修改日期。
file对象属性
name 文件名称
size 文件大小
type 文件类型
fileReader对象
FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。
FileReader.readAsBinaryString(fileBlob)
-result
属性会包含一个文件的二进制的格式FileReader.readAsText(fileBlob, opt_encoding)
-result
属性将会包含一个文件的文本格式,默认解码参数是 “utf-8”。FileReader.readAsDataURL(file)
-result
将会包含一个文件的 DataURL 格式(图片通常用这种方式)