在前端开发中，我们经常需要为用户提供上传文件的功能。HTML 提供了 <input type="file"> 元素来让用户选择文件。但是，有时候我们需要对选中的文件进行一些处理，比如预览图片或者上传到服务器。本文将介绍如何使用 JavaScript 和 AJAX 技术，实现在选中文件后改变文件路径的效果。
1. 获取选中的文件
首先，我们需要获取用户选中的文件。当用户选择完文件后，浏览器会自动将选中的文件信息存储在 <input> 元素的 files 属性中。我们可以通过以下代码获取选中的文件：
----- ------------ - --------------------------------------------- ----- ----- - -------------------
其中，inputElement 是 <input> 元素的 DOM 对象，files 属性是一个 FileList 对象，它包含了所有选中的文件。如果用户只选中了一个文件，我们可以通过 files[0] 来获取这个文件的详细信息。如果用户选中了多个文件，我们可以通过循环遍历 files 来依次处理每个文件。
2. 显示选中的文件
获取选中的文件之后，我们可以将文件信息显示给用户，让用户确认是否选择了正确的文件。在本例中，我们将显示文件名和文件大小。代码如下：
----- -------- - -------------- ----- -------- - -------------- --------------------------------------------- -----
3. 改变文件路径
在默认情况下，<input type="file"> 元素不允许 JavaScript 修改已选中文件的完整路径。这是出于安全考虑，防止网站通过 JavaScript 获取用户本地文件的路径。
但是，如果我们需要对选中的文件进行预览或上传等操作，就需要获取文件的完整路径。这时可以使用 AJAX 技术，在不刷新页面的情况下，向服务器发送请求获取文件路径。具体代码如下：
----- ---- - ---------
----- --- - --- -----------------
--------------- -------------------------------------------------------------
---------- - ---------- -
-- ----------- --- ---- -
----- -------- - ----------------- -- -------
--------------------------------
- ---- -
------------------------------------
-
--
-----------其中，XMLHttpRequest 是 AJAX 的核心对象，用于向服务器发送请求和接收响应。xhr.open() 方法指定请求的类型和 URL，xhr.onload 事件处理函数在请求成功后执行，xhr.responseText 属性包含了服务器返回的文本内容。在本例中，我们向服务器发送了一个带有文件名参数的 GET 请求，服务器会根据文件名返回文件的完整路径。当我们获取到文件路径后，就可以使用它进行后续操作了。
4. 实例代码
下面是一个完整的实例代码，可以在浏览器中运行。请注意，为了使 AJAX 请求正常工作，你需要在本地搭建一个简单的服务器，并在服务器端处理 getFilePath.php 请求。
--------- -----
------
------
----- ----------------
-------------------
-------
------
------ ------------
--------
----- ------------ - ---------------------------------------------
--------------------------------------- ---------- -
----- ----- - -------------------
----- -------- - --------------
----- -------- - --------------
--------------------------------------------- -----
----- ---- - ---------
----- --- - --- -----------------
--------------- -------------------------------------------------------------
---
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------