jQuery Ajax实现文件上传提交的实战指南

ziblog

已于 2025-06-27 14:24:56 修改

阅读量685

点赞数 21

CC 4.0 BY-SA版权

文章标签： jquery ajax 前端

于 2025-05-14 15:50:03 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147956267

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Ajax文件上传示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.upload-container {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
margin-bottom: 20px;
}
.progress {
height: 20px;
background: #f5f5f5;
margin-top: 10px;
display: none;
}
.progress-bar {
height: 100%;
background: #4CAF50;
width: 0%;
transition: width 0.3s;
}
#result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>jQuery Ajax文件上传示例</h1>

<form id="uploadForm" enctype="multipart/form-data">
<div class="upload-container">
<h3>选择要上传的文件</h3>
<input type="file" id="fileInput" name="file" multiple>
<div class="progress" id="progressContainer">
<div class="progress-bar" id="progressBar"></div>
</div>
<button type="button" id="uploadBtn" class="btn">开始上传</button>
</div>
</form>

<div id="result"></div>

<script>
$(document).ready(function() {
// 上传按钮点击事件
$('#uploadBtn').click(function() {
var files = $('#fileInput')[0].files;

if (files.length === 0) {
alert('请选择至少一个文件');
return;
}

// 显示进度条
$('#progressContainer').show();

// 创建FormData对象
var formData = new FormData();

// 添加文件到FormData
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}

// 添加其他表单数据（如果需要）
formData.append('uploader', 'jQuery Ajax');

// 发送Ajax请求
$.ajax({
url: 'upload.php', // 替换为你的服务器端处理脚本
type: 'POST',
data: formData,
processData: false, // 告诉jQuery不要处理发送的数据
contentType: false, // 告诉jQuery不要设置Content-Type请求头
xhr: function() {
var xhr = new window.XMLHttpRequest();

// 上传进度事件
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#progressBar').css('width', percent + '%');
$('#progressBar').text(percent + '%');
}
}, false);

return xhr;
},
success: function(response) {
$('#result').html('<p>上传成功！服务器返回：</p><pre>' + JSON.stringify(response, null, 2) + '</pre>');
$('#progressContainer').hide();
},
error: function(xhr, status, error) {
$('#result').html('<p>上传失败：' + error + '</p>');
$('#progressContainer').hide();
}
});
});
});
</script>
</body>
</html>