拖拽,预览,上传

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #drop {
            border: 1px solid gray;
            height: 100px;
        }
        img {
            height: 100px;
        }
    </style>
</head>

<body>
    <div id='drop'>
        <input type="file" name="file" id="upload-file">
    </div>

    <div id="destination"></div>
    <script>
        var drop = document.getElementById('drop');
        var upload_file = document.getElementById('upload-file');
        var destination = document.getElementById('destination');

        // 进入元素触发
        drop.addEventListener("dragenter", function (e) {
            e.preventDefault();
            console.log('进入', e);
        })
        // 离开元素触发
        drop.addEventListener("dragleave", function (e) {
            e.preventDefault();
            console.log('离开', e);
        })
        // 元素上移动触发
        drop.addEventListener("dragover", function (e) {
            e.preventDefault();
        })

        // 放置图片在元素上触发
        drop.addEventListener("drop", function (event) {
            var e = event || window.event;
            e.preventDefault();//阻止默认事件,这是必须的,
            var files = e.dataTransfer.files;
            console.log(files);
            fileFn(files);
        })
        // input选择图片触发
        upload_file.addEventListener('change', function () {
            console.log(this.files);
            fileFn(this.files);
        });

        var isempty = false;//是否清空已选择文件
        var fileArr = [];//存储选中的文件数据

        function fileFn(f) {
            if (isempty) {
                fileArr = [];
            }
            for (var i = 0; i < f.length; i++) {
                fileArr.push(f[i]);
            }
            destination.innerHTML = '';
            for (var x = 0, xlen = fileArr.length; x < xlen; x++) {
                file = fileArr[x];
                if (file.type.indexOf('image') != -1) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = new Image();
                        img.src = e.target.result;
                        destination.appendChild(img);
                    };
                    reader.readAsDataURL(file);//读取文件
                }
            }
            upload();
        }
      
        function upload() {
            xhr = new XMLHttpRequest();
            xhr.open("post", "http://b.adtk.cn/file.php", true);
            // xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xhr.onload=function(data){
                if(xhr.readyState==4&&xhr.status==200){
                    console.log(xhr.responseText);
                }
                
            };
            var fd = new FormData();
                fd.append('file', fileArr[0]);
            xhr.send(fd);
        }

    </script>
</body>

</html>

php文件上传

<?php
    header('Access-Control-Allow-Origin:*');
/*
{
"name":"1.png",//原名称。
"type":"image\/png",//文件的 MIME 类型
"tmp_name":"C:\\Users\\h\\AppData\\Local\\Temp\\phpEAC5.tmp",//临时文件名
"error":0,//错误代码,0成功,1大小超过php.ini限制,2-超过HTML 表单中 MAX_FILE_SIZE 选项指定的值,3; 文件只有部分被上传。 4; 没有文件被上传。5; 上传文件大小为0. 
"size":160330//已上传文件的大小
}
*/
// 檢查文件是否已存在
if (file_exists("upload/" . $_FILES["file"]["name"])){
    echo $_FILES["file"]["name"] . "已存在";
}else{
    // 將零時文件保存
    move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);

    echo json_encode($_FILES['file']);
}
?>

预览兼容性方案(网上搜的)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js图片上传预览</title>
    <script>
        function PreviewImage(imgFile)
        {
            var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
            filextension=filextension.toLowerCase();
            if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
            {
                alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
                imgFile.focus();
            }
            else
            {
                var path;
                if(document.all)//IE
                {
                    imgFile.select();
                    path = document.selection.createRange().text;
                    document.getElementById("imgPreview").innerHTML="";
                    document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
                }
                else//FF
                {
                    path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
                    //path = imgFile.files[0].getAsDataURL();// FF 3.0
                    document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
                    //document.getElementById("img1").src = path;
                }
            }
        }
    </script>
</head>
<body>
<input type="file" onchange='PreviewImage(this)' />
<br />
<div id="imgPreview" style='width:120px; height:100px;'>
    <img id="img1" src="" width="120" height="100" />
</div>
</body>
</html>

https://adtk.cn