Ajax上传文件

Question

I am testing uploading files with Ajax and PHP. The above code succeed without uploading the file why?

{

    <form method="post"  enctype="multipart/form-data">
        <input id='files' type='file'>
    </form>
    <script>

        document.getElementById('files').addEventListener('change', function (e) {
            var file = this.files[0];
            console.log(file);
            var xhr = new XMLHttpRequest();
            xhr.file = file; // not necessary if you create scopes like this
            xhr.addEventListener('progress', function (e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;

            }, false);
            if (xhr.upload) {
                xhr.upload.onprogress = function (e) {
                    var done = e.position || e.loaded, total = e.totalSize || e.total;

            }
            xhr.onreadystatechange = function (e) {
                if (4 == this.readyState) {
                    console.log(['xhr upload complete', e]);
                }
            };
            xhr.open('post', 'arxeia', true);
            xhr.send(file);
        }, false);
    </script>


</body>}

Do you thing that I should attach a post handler?

Answer 1

you should use FormData to send the file

document.getElementById('files').addEventListener('change', function (e) {
    var file = this.files[0];
    console.log(file);
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    fd.append("file", file);

    xhr.addEventListener('progress', function (e) {
        var done = e.position || e.loaded, total = e.totalSize || e.total;
    }, false);
    if (xhr.upload) {
        xhr.upload.onprogress = function (e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
    }
    xhr.onreadystatechange = function (e) {
        if (4 == this.readyState) {
            console.log(['xhr upload complete', e]);
        }
    };
    xhr.open('post', 'arxeia', true);
    xhr.send(fd);
}, false);

you will then be able to get the file on the server with $_FILES["file"]