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！
h5拖拽上传图片
原文地址：https://www.cnblogs.com/7Ezreal/p/8213612.html