拖拽上传图片(只能上传单张)

来源：互联网发布：淘宝卖家子账号认证编辑：程序博客网时间：2024/04/30 10:06

upload.html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a{cursor: pointer;}.d1{width: 80%;height: 200px;background: #ddd;}#d1_content{width: 75%;height: 200px;}#a_upload{}</style></head><body><div class="d1"><div id="d1_content"></div></div><input type="file" name="mypic" style="display:none;"><a id="a_upload">上传</a><script src="js/jquery.min.js"></script><script src="js/ajax.js"></script><script>//拖动上传图片function getId(id){return document.getElementById(id);}$(document).on({dragenter:function(e){e.preventDefault()},dragover:function(e){e.preventDefault()},dragleave:function(e){e.preventDefault()},drop:function(e){e.preventDefault()},});var drop_area=getId("d1_content");//ondrop 事件在可拖动元素或选取的文本放置在目标区域时触发。var fd=null;drop_area.ondrop=function(e){e.preventDefault();var fileInfo=e.dataTransfer.files;        var size=Math.ceil(fileInfo[0].size/1024);if(size>2048){alert("上传图片太大，不能超过2MB");return;}var type=fileInfo[0].type.indexOf("image");if(type==-1){alert("只能上传图片格式的文件");return;}var img=window.URL.createObjectURL(fileInfo[0]);var html=`<img src="${img}" />`;$("#d1_content").html(html);fd=new FormData();fd.append("mypic",fileInfo[0]);}a_upload.onclick=function(e){e.preventDefault();var xhr = new XMLHttpRequest();    xhr.onreadystatechange = function(){      console.log(xhr.responseText);    }    xhr.open("POST","upload.php",true);    xhr.setRequestHeader("X-Requested-With",      "XMLHttpRequest");    xhr.send(fd);}</script></body></html>

注：需要引入JQ。

ajax.js:

//封装适合各种情况的简化版ajax函数function ajax({//利用解构，获取将来参数对象中每个属性值  type,//请求类型: "get"||"post"  url,//请求的url地址: "xxx.php"  data,//请求携带的参数: "变量1=值&..."  dataType,//服务器端返回值类型: "json"||"text"}){  //服务器端返回值类型默认为text  dataType=dataType||"text";  //只要远程请求，必有延迟，只要延迟，比用promise等待完成后，才执行后续操作  return new Promise(function(resolve){//.then()    //AJAX 4步/5步:    var xhr=new XMLHttpRequest();//1.获得xhr对象    //如果是get请求，且传入了data参数，才需要拼接url和data为get请求的完整地址    if(type.toLowerCase()=="get"&&data!==undefined)      url+="?"+data;    xhr.open(type,url,true);//2. 建立连接    //3. 设置请求状态回调函数    xhr.onreadystatechange=function(){      //如果请求完成，且成功!      if(xhr.readyState==4&&xhr.status==200){        //如果服务器端响应类型不是json，则调用后续resolve操作，并传入原始responseText，做后续处理        if(dataType.toLowerCase()!="json")          resolve(xhr.responseText);        else//如果服务器端响应类型是json，则自动调用JSON.parse转为js对象，再交给resolve函数做后续处理          resolve(JSON.parse(xhr.responseText));      }    }    //只有type为post，才需要设置请求头    if(type.toLowerCase()=="post")      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //只有type为post，才需要send时，传入参数    xhr.send(type.toLowerCase()=="post"?data:null);  })}

init.php:

<?php $conn=mysqli_connect('127.0.0.1','root','','upload',3306);      mysqli_query($conn,"SET NAMES UTF8");?>

upload.php:

<?php require("init.php");$rs=empty($_FILES);if($rs){echo '{"code":-1,"msg":"没有上传文件"}';exit;}$picname=$_FILES["mypic"]["name"];$picsize=$_FILES["mypic"]["size"]/1000;$type=strtolower(strstr($picname,"."));if($type!=".jpg"&&$type!=".gif"&&$type!=".png"){echo '{"code":-2,"msg":"上传文件类型错误"}';exit;}if($picsize>2048){echo '{"code":-3,"msg":"上传文件过大，不能超过2MB"}';exit;}$filename=time().rand(1,9999).$type;$src=$_FILES["mypic"]["tmp_name"];$des="uploads/".$filename;move_uploaded_file($src,$des);$sql="INSERT INTO upload_img(path) VALUES('$des')";$result=mysqli_query($conn,$sql);if($result)echo '{"code":1,"msg":"上传成功"}';?>

注：最好不要上传很大的图片，因为post上传有限制。

阅读全文

'); })();