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

来源：互联网 2023-03-16 19:17:34 版权归原作者所有，如有侵权，请联系我们

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

方法/步骤

要判断浏览器是否支持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信息

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

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

给div加上dragover和drop事件

dragover不需要实现什么功能，它要做的是阻止冒泡，如果不加，drop无效

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

接下来获得文件的信息，这里用到了dataTransfer

var files = evt.dataTransfer.files;

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

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

4本页面未经许可获取自百度经验

遍历文件，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);

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

效果如下图

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

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

如何实现html5拖...

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS

上一篇：如何做一个CSS3音乐播放器下一篇：DIV+CSS入门之布局和浮动