一般情况下，网页只能显示服务器上的图片。
（网页中的图片都是从服务器端请求来的图片）。
如何实现页面中显示客户端的图片呢？（比如说在桌面上拖拽一个图面到网页中的容器中）
HTML5中提供的用于文件输入输出（I/O）的对象：
File：代表一个文件/目录文件对象
FileList：代表一个文件列表（类数组对象）
FileReader：用于从文件中读取内容
FileWriter：用于向文件写出内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 400px;
height: 200px;
border:1px solid #aaa;
}
</style>
</head>
<body>
<h2>请拖拽您的图片到下放区域中</h2>
<div id="container"></div>
<script>
//拖放的目标对象--document，监听drop事件，防止浏览器中打开客户端图片
document.ondragover=function(e){
//阻止dragover的默认行为；继续触发dragleave
e.preventDefault();
}
document.ondrop=function(e){
//阻止document的drop事件的默认行为：在当前敞口中打开客户端图片
e.preventDefault();
}
//拖放的源对象--客户端的图片
//拖放的目标对象--div#container，若图片释放此元素上方，则需要在其中显示出该图片
container.ondragover=function(e){
e.preventDefault();
}
container.ondrop=function(e){
//读取拖放进来的客户端图片
//提示Chrome此处的显示有问题：files.length:0，其实不是0
//遍历拖进来的内容
/*for(var i=0;i<list.length;i++){
var f=list[i];
console.log(f);
}*/
var f0=e.dataTransfer.files[0];
var reader=new FileReader();//文件读取器
//只适合于文本文件,读取指定为文件的内容，作为'数据URL'
reader.readAsDataURL(f0);
reader.onload=function(){
//客户端文件读取完成
var img=new Image();
img.src=reader.result;//DataURL
container.appendChild(img);
}
}
</script>
</body>
</html>