在前端工作中,我们经常需要使用jQuery Ajax来进行数据的传递,而有时候我们也需要传送文件。那么如何使用jQuery Ajax传送文件呢?
jQuery提供了一个比如Ajax直接上传文件的方法,它是通过FormData和XMLHttpRequest的组合来实现的。在这样的一个组合中,FormData用于构建一个请求体,而XMLHttpRequest对象用于发送这个请求。我们只需简洁的代码,就可以实现执行这两个操作。
var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); $.ajax({ url: 'upload.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(response){ console.log(response); }, error: function(xhr, status, error){ console.log(xhr.responseText); } });
上述代码首先创建了一个FormData对象,将要上传的文件添加进去。然后通过$.ajax()方法将数据上传至upload.php文件,我们可以在这个文件中使用$_FILES数组来获取上传的文件信息。processData选项设为false,是为了让jQuery不要对传进来的FormData对象做任何处理。contentType选项也设为false,这样jQuery就会在xhr.send()方法中设置合适的Content-Type头部。
不难看出,靠着Ajax直接传文件现在逐渐被广泛应用。jQuery对于开发人员来说很有帮助,它的API让开发变得更加容易、快捷,并且可以有效地提高效率。