jsドラッグして画像をアップロードする
5769 ワード
h 5ドラッグして画像をアップロードすることを実現する
ここでは、jsを通じてドラッグして画像をアップロードする方法を紹介します.
まず、ブラウザのデフォルトのドラッグイベントを無効にします.
ここでは、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
绑定拖拽事件：
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);