普通（无库）AJAX文件上传

Question

我正在快速尝试轻量级文件上传功能。

关于使用jQuery将文件上传到服务器，SO上有很多答案， 我想避免这种情况。

我正在寻找一种使用普通Javascript（无JS库）选择文件时将文件上传到服务器进行验证的方法

关键问题是：
1.为什么AJAX调用不起作用？
2.按下“上传”按钮后，我想在服务器端确认文件名相同，如果相同，则不执行任何操作（如果不同），停止当前服务器处理，然后重新开始-是否可以用PHP做到这一点？

源文件的当前状态如下：html：

<!DOCTYPE html>
<html lang="en">
<body>
<form id="upload_form" action="processPage.php" method="post">
    <input type="file" accept=".csv" id="input_file">
    <output id="file_upload"></output>
    <label id="status_message"></label>
    <br>
    <input type="button" id="upload_to_server" value="upload" onclick="uploadFile" >

</form>
 <script>
    // Send file to server for validation
    function handleFileSelect(e)
    {
        // file that was uploaded
        file = e.target.files[0];

        // create XMLHttpRequest object
        if (window.XMLHttpRequest)
        {
            request = new XMLHttpRequest();
        }
        else
        {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        request.open("POST", "processPage.php", true);
        request.setRequestHeader("X_FILENAME", file.name);
        // Check status message
        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                var message;
                switch (request.status) {
                    case 200:
                         message = "File validated successfully.";
                         break;
                    case 406:
                         message = "Error: No file selected.";
                         break;
                    default:
                        message = "File validation failure, check file contents.";
                        break;
                }
                var container = document.getElementById('status_message');
                container.innerHTML = message;
            }
            else {
                alert( "Unexpected error:  " + this.statusText + ".\nPlease try again");
            }
        };
        request.send(file);

    }

    // Process file on server - send it again to server if file name changed
    function uploadFile()
    {

    }

    var output = document.getElementById('file_upload');
    if (output.addEventListener) {
        output.addEventListener('change', handleFileSelect, false);
    } else {
        output.attachEvent('change', handleFileSelect);
    }

    </script>
</body>
</html>

php文件：

<?php
    if ($_SERVER['REQUEST_METHOD'] != 'POST' || !isset($_SERVER['HTTP_X_FILENAME'])) {
        $response_code = 406;
    }
    else {
        // FIXME - how to distinguish between the POST from AJAX 'validate file' & 'upload file' call

        $response_code = 200;
    }
    header('X-PHP-Response-Code: '.$response_code, true, $response_code);

?>

Answer 1

使用XMLHttpRequest级别2中的FormData对象。

var formData = new FormData();
var fileInput = document.getElementById('input_file');
var file = fileInput.files[0];
formData.append("thefile", file);
request.send(formData);

这样，您可以从PHP中访问文件

$_FILES['thefile'];

普通（无库）AJAX文件上传

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-10-07 03:52:45

普通（无库）AJAX文件上传

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-10-07 03:52:45

解决方案1
4 已采纳 2014-10-07 03:52:45