jquery 上传文件
jQuery 文件上传实现方法
使用 jQuery 实现文件上传功能可以通过多种方式完成，以下是常见的实现方法：
使用 FormData 和 AJAX
创建 HTML 表单包含文件输入框：
<input type="file" id="fileInput" name="file">
<button id="uploadButton">上传文件</button>jQuery 代码处理文件上传：
$('#uploadButton').click(function() {
var file = $('#fileInput')[0].files[0];
var formData = new FormData();
formData.append('file', file);
$.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 File Upload 插件
引入必要的插件文件：
<link href="jquery.fileupload.css" rel="stylesheet">
<script src="jquery.fileupload.js"></script>初始化文件上传：
$('#fileupload').fileupload({
url: 'upload.php',
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name + ' 上传成功').appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
}
});服务器端处理示例 (PHP)
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempName = $_FILES['file']['tmp_name'];
$fileName = $_FILES['file']['name'];
$uploadPath = 'uploads/' . basename($fileName);
if (move_uploaded_file($tempName, $uploadPath)) {
echo json_encode(['status' => 'success', 'message' => '文件上传成功']);
} else {
echo json_encode(['status' => 'error', 'message' => '文件移动失败']);
}
} else {
echo json_encode(['status' => 'error', 'message' => '上传错误']);
}注意事项
- 确保服务器端脚本有正确的文件上传权限
- 设置合适的文件大小限制 (php.ini 中的 upload_max_filesize 和 post_max_size)
- 考虑添加文件类型验证
- 对于大文件上传，可能需要实现分块上传功能
- 添加进度条显示上传进度
