HTML5中File对象初探

<script type="text/javascript">
/*var inputFile=document.getElementById('input');
inputFile.addEventListener('change',handF,false);
function handF(){
	var fileList=this.files;
	for(var i=0;i<fileList.length;i++){
		console.log(fileList[i])
	}
}*/
var drapbox=document.getElementById('drapbox');
drapbox.addEventListener('dragenter',dragenter,false);//进入
drapbox.addEventListener('dragover',dragover,false);//进入与离开之间
drapbox.addEventListener('drop',drop,false);//释放鼠标

function dragenter(e){
	e.stopPropagation();
	e.preventDefault();

}
function dragover(e){
	e.stopPropagation();
	e.preventDefault();
}
function drop(e){
	e.stopPropagation();
	e.preventDefault();
	var dt=e.dataTransfer;
	var files=dt.files;//获取的是files（对象）集合
	//alert(files)
	//如何获取文件内容 
	//处理这个对象 
	handleFiles(files)
}

function handleFiles(files){//参数是需要处理的文件对象集合
	for(var i=0;i<files.length;i++){
		var file=files[i];
		var imageType=/image.*/;//图片格式正则 
		//判断不满足合适的跳过 
		if(!file.type.match(imageType)){
			alert('格式错误');
		}
		var img=document.createElement('img');
		img.file=file;
		drapbox.appendChild(img);
		
		//读取文件信息 
		var reader=new FileReader();
		reader.onload=(function(amg){
			return function(e){
				amg.src=e.target.result;
			}
		})(img)
		reader.readAsDataURL(file)
		
		
		//读取文件的二进制源码
		var fileBinary=file.getAsBinary()
	}
	
}
//以上获取文件对象  读取文件内容
//以下是同后台交互 将读取到的文件发送到后端 原理是通过fileReader 的readAsBinaryString读取到文件的二进制 然后通过AJAX和sendAsBinary将其发送出去 
</script>

参考地址：http://www.jsmix.com/blog/html5/html5-file-pre-test.html