jquery 上传
jQuery 文件上传方法
使用 jQuery 实现文件上传可以通过多种方式完成，以下是常见的几种方法：
使用原生表单和 AJAX
创建一个包含文件输入的表单，并通过 jQuery 的 AJAX 方法发送数据：
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput">
<button type="submit">上传</button>
</form>$('#uploadForm').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log('上传成功:', response);
},
error: function(xhr, status, error) {
console.error('上传失败:', error);
}
});
});使用 jQuery 插件
jQuery 有许多专门用于文件上传的插件，例如 jQuery File Upload：
<input type="file" id="fileupload" name="files[]" multiple>
<div id="progress">
<div class="bar" style="width:0%"></div>
</div>$('#fileupload').fileupload({
url: 'upload.php',
dataType: 'json',
done: function(e, data) {
console.log('上传完成:', data.result);
},
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
}
});使用 Fetch API 替代 AJAX
现代浏览器支持 Fetch API，可以结合 jQuery 使用：
$('#uploadForm').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));
});服务器端处理示例（PHP）
在服务器端接收文件并保存：
<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempName = $_FILES['file']['tmp_name'];
$fileName = basename($_FILES['file']['name']);
$uploadPath = 'uploads/' . $fileName;
if (move_uploaded_file($tempName, $uploadPath)) {
echo json_encode(['status' => 'success', 'file' => $fileName]);
} else {
echo json_encode(['status' => 'error', 'message' => '文件移动失败']);
}
} else {
echo json_encode(['status' => 'error', 'message' => '上传错误']);
}
?>注意事项
确保表单设置了 enctype="multipart/form-data" 属性，否则文件无法正确上传。
使用 AJAX 上传文件时，必须设置 processData: false 和 contentType: false，避免 jQuery 对数据进行处理。
对于大文件上传，可能需要配置服务器端的 upload_max_filesize 和 post_max_size（PHP）或相应的其他语言设置。
