h5实现拖拽上传图片
本文将为大家介绍如何通过js实现拖拽上传图片。
首先我们要禁用调浏览器默认的拖拽事件：
1 window.onload = function(){ 2 //拖离 3 document.addEventListener(‘dragleave‘,function(e){e.preventDefault();}); 4 //拖后放 5 document.addEventListener(‘drop‘,function(e){e.preventDefault();}); 6 //拖进 7 document.addEventListener(‘dragenter‘,function(e){e.preventDefault();}); 8 //拖来拖去 9 document.addEventListener(‘dragover‘,function(e){e.preventDefault();}); 10 };
然后在网页上定义一个拖拽放置区域，也就是我们要将图片放置回显的区域：
1 <div id="dragImg"></div>
绑定拖拽事件：
1 var box = document.getElementById("dragImg");
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.URL.createObjectURL(fileList[0]);
// var filesize = Math.floor((fileList[0].size)/1024);
$("#dragImg").css({"background":"url("+img+") no-repeat center center","backgroundSize":"100% 100%"});
var imgDatatype = filename.split(".")[1];
var formData = new FormData();
formData.append("name",fileList[0],imgDatatype); //name:为一半表单上传时的元素name是和后台约定好的
$.ajax({
type:"post",
url:‘your Ajax url‘,//ajaxurl
async:false,
dataType:"text",
data:formData,
processData : false,
contentType : false,
success:function(data){
if(data){
$("#dragImg").css({"background":"url("+data+") no-repeat center center","backgroundSize":"100% 100%"});
}else{
console.log(data)
}
},error:function(e){
console.log(e)
}
})
},false);
这就是图片拖拽上传的前端处理方法，over！
