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

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

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

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

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

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

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