zoukankan      html  css  js  c++  java
  • drag file upload xhr 拖拽异步上传文件

    <div id="droptarget" style=" 500px; height: 200px; background: silver">
        Drop some files here
    </div>
    <script>
        window.onload = function () {
            var droptarget = document.getElementById("droptarget");
    
            function handleEvent(event) {
                output = document.getElementById("output"),
                        data, xhr,
                        files, i, len;
    
                event.preventDefault();
                if (event.type == "drop") {
                    data = new FormData();
                    files = event.dataTransfer.files;
                    i = 0;
                    len = files.length;
    
                    while (i < len) {
                        data.append("file" + i, files[i]);
                        i++;
                    }
    
                    xhr = new XMLHttpRequest();
                    xhr.open("post", "upload.php", true);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4) {
                            console.log(+new Date() + "upload success");
    //                            alert(xhr.responseText);
                        }
                    };
                    console.log(+new Date() + "upload start");
                    xhr.send(data);
                }
            }
    
            droptarget.addEventListener('dragenter', handleEvent, false);
            droptarget.addEventListener('dragover', handleEvent, false);
            droptarget.addEventListener('drop', handleEvent, false);
        };
    
    </script>
    <pre id="output"></pre>

    upload.php

    $f = $_FILES['file0'];
    var_dump($f);
  • 相关阅读:
    UML基本关系
    C++关键字简述
    Install opencv on Centos
    C++编程规范
    YCbCr to RGB and RGB toYCbCr
    Linux目录结构(二)
    Dubbo工作流程
    spring bean的作用域和生命周期
    spring aop原理和实现
    静态代理、jdk动态代理、cglib动态代理
  • 原文地址:https://www.cnblogs.com/human/p/3469844.html
Copyright © 2011-2022 走看看