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

最新推荐文章于 2020-10-13 19:25:38 发布

spfLinux

最新推荐文章于 2020-10-13 19:25:38 发布

阅读量662

点赞数

分类专栏： js 文章标签：拖拽上传

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

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.οndrοp=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.οnclick=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上传有限制。

spfLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽上传图片(只能上传单张)

upload.html: Document a{ cursor: pointer; } .d1{ width: 80%; height: 200px; background: #ddd; } #d1_content{ width: 75%; height: 200px; } #a_upload{ }
复制链接

扫一扫