然后，在前面的ajax系列中，jQuery的ajax方法用于向服务器发送get和post请求。本文主要描述如何使用ajax和FormData来实现上传文件而不刷新页面的效果，主要使用jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。关于表单数据，您可以阅读MDN文档。

1、先看效果图

预期的功能和效果很简单：点击页面上的上传文件表单控件，选择文件后点击“ajax Submit”将文件上传到服务器。上传成功后，页面给出简单提示。

2、前端代码

看看html代码：

div class=' box ' div div class=' item '输入类型='file '名称=' my file ' style=' font-size : 0.7 rem；'/div div class=' item ' button type=' button ' style=' display : block；padding: 4px 18px'class=' BTN-default ' Ajax submit/button/div class=' item ' button type=' submit ' style=' display : block；padding: 4px 18pxclass=' BTN-default ' form submit/button/div/div class=' prompt ' style=' font-size : 0.7 rem；'/div/divscript src=' http:/./js/jquery-3 . 1 . 0 . min . js '/script script src=' http 3360 upload 01 . js '/脚本代码很简单，需要注意的是表单表单表单并没有在页面中使用，那么如何提交数据，答案就是用FormData来模拟表单。此外，页面中的样式不会被写入。让我们看看html中引入的upload01.js代码。这是重点。

Upload01.js代码：

$(函数($) { $('input[name=myfile]')。on('change '，function(e){ $(' button[type=button]')。on('click ')，函数(e){ var formData=new formData()；//formData.ppend(名称，元素)；formData.append('myfile '，$('input[name=myfile]')[0]。文件[0])；$.Ajax ({URL :' upload.php '，方法：' post '，数据： formdata，内容类型： false，//注意这个应该设置为false processData: false。Cache: false，success:函数(数据){if (JSON。解析(数据)。结果==1) {$('。提示')。html(`文件${JSON.parse(数据))。filename}已成功上传`)；} }，error:函数(jqXHR){ console . log(JSON . stringify(jqXHR))；} }) .完成(函数(数据){ console . log(' done ')；}) .失败(函数(数据){ console . log(' fail ')；}) .始终(函数(数据){ console.log('始终')；});});});});(1)解释下面的表格数据，涉及代码的第4、6和10行。

第四行var formData=new formData()；实例化一个空的FormData对象，它可以被认为是一个表单，但是现在它里面没有控件。

第6行formdata.append ('myfile '，$(' input[name=my file])[0]。文件[0])；向实例化的formdata对象添加控件，注意现有控件输入类型=' file ' name=' my file ' style=' font-size : 0.7 rem；'(参见html代码的第4行)。

表单数据。append (name，value，filename)方法可以很容易地将控件以“键值”对的形式添加到FormData中。请注意，第三个参数“上传文本名称”是可选的。请参阅formdata了解其具体语法和用法。

在第10行，实例化的formData作为jQuery.ajax()方法的数据参数值传入，并提交给后端服务器。

(2)解释ajax()方法中的contentType和processData参数。

一个contentType参数，它是http请求启动时在请求头中设置的内容类型。jQuery.ajax()的默认值为：' application/x-www-form-URL encoded；Charset=UTF-8 '，这在大多数情况下都适用。

但是测试后默认保留时会报错，因为发送的数据中有输入类型='file '(上传文件)，那么contentType应该设置为' multipart/form-data '。但是，如果指定为这种类型的服务器(php)，将报告此错误：警告：第0行未知的多部分/表单数据post数据中缺少边界。具体原因现在还不清楚，所以先把contentType设置为false，也就是不让jQuery设置contentType。

根据jQuery.ajax()文档中的解释，默认情况下，jQuery会对发送的数据进行处理，并按照‘application/x-www-form-URL encoded’的要求将数据转换为查询字符串。如果要发送的数据是DOMDocument或者不需要处理，可以设置为false，防止jQuery转换数据。这里要发送的数据实际上是DOMDocument。

测试后，如果默认值保持不变(true)，js将在发起请求前报告一个错误：在不实现接口表单数据的对象上调用了TypeError :“append”。

此外，还有一个dataType参数，它将从服务器返回数据格式。最好不要在这里指定，而是让jquery根据http响应头中的contentType进行判断，然后返回一个合适的数据类型。指定后后台程序的逻辑处理不会受到影响，但是你在前端收到的数据很可能不是预期的数据，所以js会报告这种错误：语法错误：json。解析： JSON数据第1行第2列的意外字符，这是在数据类型被指定为JSON后报告的错误。

3.后端的php代码

后端服务器是nginx，用php处理发送的数据，代码也很简单：

？PHP//var _ dump($ _ REQUEST)；//是空数组//var _ dump($ _ FILES)；//不为空//用FormData和ajax上传文件时，$_REQUEST和$_POST为空，php://input也为空如果(isset($_FILES)！空($ _ FILES)){ if(move _ uploaded _ FILES($ _ FILES[' my file '][' tmp _ name ']，$ _ FILES[' my file '][' name ']){ echo ' { result ' : 1，' filename': ' '。$_FILES['myfile']['name']''}';} else { echo“{ 0 }”结果“: { 0 }”；}}代码的逻辑很简单，这里就不解释了。主要说说我调试程序时遇到的问题。总结一下问题，我可以说一句话：$_REQUEST和$_POST在用FormData和ajax上传文件时都是空数组，PHP 3360//input也是null。如您所见，我还在代码的第2、3和5行写了相关的注释。为什么$_REQUEST为空？我查了一些资料，但是找不到原因。我以后再找原因。

以上就是边肖介绍的jQuery的ajax，利用FormData实现了上传页面不刷新的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！