小编给大家分享一下H5实现拖拉上传文件的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能
<强>
ondragstart——用户开始拖动元素时触发
ondrag -元素正在拖动时触发
ondragend——用户完成元素拖动后触发
<强>
ondragenter -当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover——当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave -当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop——在一个拖动过程中,释放鼠标键时触发此事件
上代码
身体
<脚本>
var box1p、box2p msgp img1;
窗口。onload=function () {
box1p=. getelementbyid (“box1”);
box2p=. getelementbyid (“box2”);
msgp=. getelementbyid(“味精”);
img1=. getelementbyid (“img1”);
box1p。ondragover=function (e) {e.preventDefault ();}
box2p。ondragover=function (e) {e.preventDefault ();}
img1。ondragstart=function (e) {e.dataTransfer.setData (“imgId”、“img1”);}
box1p。ondrop=dropImghandler;
box2p。ondrop=dropImghandler;
}
函数dropImghandler (e) {
showObj (e);//获取拖放所有信息
showObj (e.dataTransfer);//获取文件
e.preventDefault ();
var img=. getelementbyid (e.dataTransfer.getData (' imgId '));
e.target.appendChild (img);
}
函数showObj (obj) {
var s=?
(var k obj) {s +=k +”:“+ obj [k] +“
”;}
msgp。innerHTML=s;
}>
该功能是可以将图片拖拉到左右两个p中的方法,我觉得没啥用,可以当作哈啤
下面是拖拉上传代码,后端PHP获取到带有_file美元之后就可以搞起来了
”;} msgp。innerHTML=s; }>
以上是H5实现拖拉上传文件的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
