在现代Web应用程序中，文件上传功能是一个重要的功能。 HTML5提供了一种新的方式来上传文件，它使用了FormData API和XMLHttpRequest Level 2 对象。 借助Ajax和jQuery库，可以更加简便地实现HTML5文件上传功能。
FormData API
HTML5中的FormData API是一个表单数据处理类，它可以很方便地处理表单数据，包括文件上传。FormData API构造器有以下几个方法：
- append(name, value, filename)： 添加表单项。
- delete(name)： 删除指定表单项。
- get(name)： 获取指定表单项的值。
- getAll(name)： 获取指定表单项的所有值。
- has(name)： 判断是否存在指定表单项。
- set(name, value, filename)： 设置指定表单项的值。
XMLHttpRequest Level 2
XMLHttpRequest Level 2 是一种增强版的XMLHttpRequest对象，支持HTML5的新特性，如进度事件、FormData API和跨域请求等。使用XMLHttpRequest Level 2可以实现异步文件上传。
jQuery的$.ajax()方法
jQuery库为我们提供了一个方便的接口来操作XMLHttpRequest对象。 $.ajax()方法是jQuery中最常用的Ajax方法，它可以设置请求的参数，并处理响应结果。
实现HTML5文件上传
以下是一个基于Ajax和jQuery的HTML5文件上传示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------
------- -----------------------------------------------------------
------- -----------------------
------------ -
-------------------------------- -
--- -------- - --- ------------------------------
--------
---- -------------
----- -------
----- ---------
------------ ------
------------ ------
---- ---------- -
--- --- - ---------------------
-------------- -
--------------------------------------- --------------- -
--- ------- - ----------------------- - ----------- - -----
------------------------------- - ----------------- - -----
-- -------
-
------ ----
--
-------- ------------------ -
----------------
--
------ --------------- ----------- ------------ -
------------------
-
---
---
---
---------
-------
------
----- --------------- ------------------------------
------ ----------- ----------- --
------- -------------- -------------------------
-------
---- ---------------- ------------- -----------
-------
-------在这个示例中，我们使用了jQuery的$.ajax()方法来实现异步文件上传。 首先，我们创建了一个FormData对象，它可以处理表单数据。 然后，我们使用$.ajax()方法来发送数据到服务器，并设置了一些参数：
- url： 文件上传的地址。
- type： HTTP请求方法（POST）。
- data： 待上传的FormData对象。
- processData： 是否将数据转换为字符串。由于FormData已经是一个字符串，因此应该设置为false。
- contentType： 要发送的内容类型。由于我们使用了FormData，所以jQuery会自动设置为multipart/form-data。
- xhr： 用于创建XMLHttpRequest对象的函数。在这个函数中，我们添加了一个进度事件来显示上传进度条。
当文件上传完成后，服务器返回结果，并执行success()或error()回调函数。在这个示例中，我们使用alert()函数来显示结果。
总结
本文介绍了如何使用Ajax和jQuery实现HTML5文件上传功能。 借助FormData API和XMLHttpRequest Level 2对象，我们可以更加简单、高效地实现文件上传功能。希望这篇文章对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11908
