Ajax上传文件

Ajax upload files

本文关键字：文件 Ajax      更新时间：2023-09-26

我正在测试用Ajax和PHP上传文件。为什么上面的代码没有上传文件就成功了?

{

    <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>}

你认为我应该附加一个post handler吗?

你应该使用FormData来发送文件

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);

，然后您将能够通过$_FILES["file"]

获取服务器上的文件
相关文章：