ajax 上传文件 文件名

AJAX（Asynchronous JavaScript and XML）是一种用于在 Web 页面中异步传输数据的技术。它允许我们在不刷新整个页面的情况下与服务器进行通信，并实时更新页面。在使用 AJAX 进行文件上传时，我们可以通过发送异步请求来传输文件数据，同时还可以获取上传文件的文件名和其他相关信息。

通过 AJAX 上传文件时，首先我们需要创建一个表单，并添加一个文件输入字段，以便用户可以选择要上传的文件。当用户选择文件并点击上传按钮时，我们可以使用 JavaScript 代码将文件数据发送到服务器端进行处理。

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="button" value="上传" onclick="uploadFile()" />
</form>

在上面的代码中，我们使用了<form>标签来创建一个表单，并使用enctype属性来指定表单数据的编码类型为"multipart/form-data"，这是一种适用于传输二进制数据的编码方式。接下来，我们添加了一个文件输入字段，其中name属性用于标识该字段的名称，id属性则是用于给字段添加一个唯一标识符。最后，我们添加了一个按钮，通过点击该按钮来触发上传文件的操作。

在JavaScript代码中，我们可以通过获取输入字段的值来获取用户选择的文件信息。例如，以下代码演示了如何获取文件名：

function uploadFile() {
    var fileInput = document.getElementById("fileInput");
    var fileName = fileInput.value.split("\\").pop();
    // 异步上传操作...
}

在这段代码中，我们使用了getElementById()方法来获取文件输入字段的引用，并使用value属性来获取用户选择的文件路径。然后，我们通过split()方法将文件路径字符串拆分为一个数组，再使用pop()方法获取数组的最后一个元素，即文件名。通过这样的操作，我们即可获取到用户选择的文件名，用于后续的操作。

一旦获取到了上传文件的文件名，我们就可以使用 AJAX 技术将文件数据发送到服务器端进行处理。在服务器端，我们可以根据文件的后缀名来执行不同的操作，例如保存文件、处理文件内容等等。

function uploadFile() {
    var fileInput = document.getElementById("fileInput");
    var fileName = fileInput.value.split("\\").pop();

    var formData = new FormData();
    formData.append("file",fileInput.files[0]);

    var xhr = new XMLHttpRequest();
    xhr.open("POST","upload.PHP",true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 处理上传成功后的响应...
        }
    };
    xhr.send(formData);
}

在上述代码中，我们首先使用了FormData对象来创建一个表单数据对象，该对象用于存储要发送的文件数据。然后，我们通过append()方法将文件添加到FormData对象中，该方法的第一个参数是用于指定文件参数的名称，第二个参数则是文件数据。

接下来，我们使用XMLHttpRequest对象来创建一个 AJAX 请求，并设置open()方法的第一个参数为"POST"，表示发送 POST 请求。第二个参数是服务器端处理上传文件的 URL 地址。在设置完请求的方法和地址后，我们通过设置onreadystatechange事件处理函数来监听请求的状态和响应。当请求的状态为4且响应的状态码为200时，表示上传成功，我们可以在该回调函数中进行相应处理。

通过以上的步骤，我们成功使用 AJAX 技术上传了文件，并获取到了文件名。这样的方式使得文件上传变得更加便捷和实时化，在很多场景下都可以派上用场。