html5拖拽文件,HTML5之文件拖拽

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

将HTML5中的文件拖拽封装成了类

drag.js:

document.write("");

//要放在哪个容器，容器的ID

function FileDrager(cntId){

this.containerId = cntId;

}

FileDrager.prototype = {

// 判断是否图片

isImage : function(type) {

switch (type) {

case 'image/jpeg':

case 'image/png':

case 'image/gif':

case 'image/bmp':

case 'image/jpg':

return true;

default:

return false;

}

},初始化

Init : function(){

获得放图片的容器

var ctn = $(this.containerId);

ctn.addEventListener('dragover',function(evt) {

evt.stopPropagation();

evt.preventDefault();

},false);

ctn.addEventListener('drop',function(e) {

e.stopPropagation();

e.preventDefault();

var fileList = e.dataTransfer.files,　　//获取拖拽文件

oImg = document.createElement('img'),reader = new FileReader();

var c = ctn;

var x = e.clientX;

var y = e.clientY;

reader.onload = function(evt) {

oImg.src = this.result;

oImg.style.position = "absolute";

oImg.style.left = x;

oImg.style.top = y;

c.appendChild(oImg);

}

reader.readAsDataURL(fileList[0]);

},false);

}

}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

总结

以上是编程之家为你收集整理的HTML5之文件拖拽全部内容，希望文章能够帮你解决HTML5之文件拖拽所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！