h5资源拖放

什么是h5资源拖放呢?

答:就是将本地的图片直接拖放在屏幕上显示。

首先在页面中布局一块放置要被拖入的框框

对这个框框进行时间规定在何处放置被拖动的数据函数,去除系统默认数据

imgcontainer.ondragover=function(e){

e.preventDefault();

}

对于框框进行被拖动数据的采集,获取被拖的图片的src内容,话不多说直接上代码

imgcontainer.ondrop=function(e){

e.preventDefault();

var f=e.dataTransfer.files[0];

var fileReader=new FileReader();//创建文本对象

fileReader.onload=function(e){

imgcontainer.innerHTML="


"}

fileReader.readAsDataURL(f);}

以上呢,就是资源拖放demo,如果各位想做文件拖拽也是可以的,只需要将拖拽文件的fileReader.result进行识别,识别是什么格式的,

在fileReader.onload中进行显示渲染

你可能感兴趣的:(h5资源拖放)