h5拖拽上传图片

Posted 2020-10-19 .伊泽瑞尔

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！