ajax 文件拖拽上传

最新推荐文章于 2021-09-14 14:40:28 发布

geekzsp

最新推荐文章于 2021-09-14 14:40:28 发布

阅读量379

点赞数

分类专栏：前端文章标签： ajax 文件上传

本文链接：https://blog.csdn.net/mixi9760/article/details/52176616

版权

前端专栏收录该内容

25 篇文章 2 订阅

订阅专栏

- 客户端
- 服务器端

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #filePost{
            width: 300px;
            height: 300px;
            border: 1px #F00 solid;
        }
    </style>
</head>
<body>
<div id="filePost" ondrop="drop(event)"></div>
<script>
    //第一步 清除 默认 浏览器对图片拖拽的处理（浏览器会展示图片）
    document.ondrop=function(event){
        event.preventDefault();
    };
    document.ondragover=function(event){
        event.preventDefault();
    };
    document.ondragenter=function(event){
        event.preventDefault();
    };
    //第二步  给div设置 ondrop 事件
    function  drop(event){

        var files=event.dataTransfer.files;
        if(files.length==0){
            return false;
        }
        if(!files[0].type.match(/image*/)){
        alert("不是图片")
            return false;
        }
        var  xhr=new XMLHttpRequest();
        xhr.open("post","upload.php",true);
        var  formData=new FormData();
        formData.append('mypic',files[0]);
        xhr.send(formData);
    }
</script>
</body>
</html>

服务器端

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2016/7/23
 * Time: 10:51
 */
if(!empty($_FILES["mypic"])){
    move_uploaded_file($_FILES["mypic"]["tmp_name"],$_FILES["mypic"]["name"]);
}
?>