html拖拽上传

 

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 格式（图片通常用这种方式）