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

1、要判断浏览器是否支持html5的file api，可以加上如下代码

if (window.File && window.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、接下来获得文件的信息，这里用到了dataTransfer

var files = evt.dataTransfer.files;

如果在files上加断点，就能看到你拖进来的文件的信息

5、遍历文件，FileReader读取，并显示。

主要代码如下，list为显示的容器

var reader = new FileReader();

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的样式