HTML5&CSS3：[3]拖拽图片到浏览器并显示

利用html5的FileAPI让浏览器可以获得本地的文件信息，下面演示把图片文件拖进区域并显示图片的例子

方法/步骤

1、要判断浏览器是否支持html5的fi盟敢势袂leapi，可以加上如下代码if(window.File&&w足毂忍珩indow.FileReader&&window.FileList&&window.Blob){}else{alert('TheFileAPIsarenotfullysupportedinthisbrowser.');}如果不支持，打开页面会有alert信息

2、新建一个html页面，一个div作为文件拖入的区域

3、给div加上dragover和drop事件dragover不需要实现什么功能，它要做的是阻止冒泡，如果不加，drop无效

4、接下来获得文件的信息，这里用到了dataTransfervarfiles=evt.dataTransfer.files;如果在files上加断点，就能看到你拖进来的文件的信息

5、遍历文件，FileReader读取，并显示。主要代码如下，l坡纠课柩ist为显示的容器varreader=newFi造婷用痃leReader();reader.onload=(function(theFile){returnfunction(e){varspan=document.createElement('span');span.innerHTML=['<imgsrc="',e.target.result,'"title="',theFile.name,'"/>'].join('');document.getElementById('list').insertBefore(span,null);};})(f);reader.readAsDataURL(f);

6、效果如下图如果要现实缩略图，只要修改插入的img的样式