拖拽上传html5,拖拽上传文件 如何实现

html5 图片上传 可收缩 拖拽

可以参考chrome小乐图客扩展的截图功能，支持粘贴剪贴板图片、拖拽图片、或者粘贴图片网址上传，是通过html5 file reader实现的。

相关问答

Q1: 怎样用html5实现拖拽上传文件

，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。

$(function(){

...接上部分

var box = document.getElementById('drop_area'); //拖拽区域

box.addEventListener("drop",function(e){

e.preventDefault(); //取消默认浏览器拖拽效果

var fileList = e.dataTransfer.files; //获取文件对象

//检测是否是拖拽文件到页面的操作

if(fileList.length == 0){

return false;

}

//检测文件是不是图片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是图片！");

return false;

}

//拖拉图片到浏览器，可以实现预览功能

var img = window.webkitURL.createObjectURL(fileList[0]);

var filename = fileList[0].name; //图片名称

var filesize = Math.floor((fileList[0].size)/1024);

if(filesize500){

alert("上传大小不能超过500K.");

return false;

}

var str = "img src='"+img+"'p图片名称："+filename+"/pp大小："+filesize+"KB/p";

$("#preview").html(str);

//上传

xhr = new XMLHttpRequest();

xhr.open("post", "upload.php", true);

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();

fd.append('mypic', fileList[0]);

xhr.send(fd);

},false);

});

Q2: 如何使用HTML5进行文件拖放

如何使用HTML5进行文件拖放

1.实现将文件拖放到页面元素上

2.在JavaScript中分析被拖放的文件

3.在客户端上加载和解析文件

4.使用XMLHttpRequest2将文件异步上传到服务器

5.上传时，显示图形进度条

6.使用进程增强( progressive enhancement)以确保文件上传表单在所有浏览器正常工作

7.纯JavaScript代码，不使用其它库。