input type=file 选择文件后自动上传_ajax选择文件后自动上传-优快云博客

本文介绍了一种使用jQuery和FormData API实现文件上传的方法。通过监听文件输入框的change事件，当用户选择文件后，自动触发文件上传过程。利用FormData对象封装文件数据，并通过AJAX以POST方式发送至服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文件上传</title>
<script type="text/javascript" src="js/jquery%20v3.3.1.js"></script>
<script type="text/javascript">
//③创建fileLoad方法用来上传文件
function fileLoad(ele){
//④创建一个formData对象
var formData = new FormData();
//⑤获取传入元素的val
var name = $(ele).val();
//⑥获取files
var files = $(ele)[0].files[0];
//⑦将name 和 files 添加到formData中，键值对形式
formData.append("file", files);
formData.append("name", name);
$.ajax({
url: "test.php",
type: 'POST',
data: formData,
processData: false,// ⑧告诉jQuery不要去处理发送的数据
contentType: false, // ⑨告诉jQuery不要去设置Content-Type请求头
beforeSend: function () {
//⑩发送之前的动作
alert("我还没开始发送呢");
},
success: function (responseStr) {
//11成功后的动作
alert("成功啦");
}
,
error : function (responseStr) {
//12出错后的动作
alert("出错啦");
}
});
}
$(function () {
var $input = $("#upLoad");
// ①为input设定change事件
$input.change(function () {
// ②如果value不为空，调用文件加载方法
if($(this).val() != ""){
fileLoad(this);
}
})
})
</script>
</head>
<body>
<form action="">
<input type="file" id="upLoad">
</form>
</body>

</html>