淘先锋技术网

首页 1 2 3 4 5 6 7

在前端工作中,我们经常需要使用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让开发变得更加容易、快捷,并且可以有效地提高效率。