jquery上传文件
使用 jQuery 实现文件上传
基本 HTML 结构
创建一个包含文件输入的表单，确保设置 enctype="multipart/form-data" 以支持文件上传。
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput" />
<button type="submit">上传文件</button>
</form>
<div id="status"></div>使用 jQuery 的 AJAX 提交
通过 jQuery 的 $.ajax 方法处理文件上传，监听表单的提交事件。
$(document).ready(function() {
$('#uploadForm').on('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) {
$('#status').html('上传成功: ' + response);
},
error: function(xhr, status, error) {
$('#status').html('上传失败: ' + error);
}
});
});
});后端处理示例（PHP）
创建一个简单的 PHP 脚本（upload.php）接收文件并保存到服务器。
<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempPath = $_FILES['file']['tmp_name'];
$uploadPath = 'uploads/' . basename($_FILES['file']['name']);
move_uploaded_file($tempPath, $uploadPath);
echo '文件已保存为: ' . $uploadPath;
} else {
echo '上传失败: ' . $_FILES['file']['error'];
}
?>进阶功能：进度显示
通过 xhr 对象监听上传进度，实时显示进度条。
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
$('#status').html('上传进度: ' + percent + '%');
}
}, false);
return xhr;
},
success: function(response) {
$('#status').html('上传成功: ' + response);
}
});注意事项
- 确保服务器目录（如
uploads/）有写入权限。 - 限制文件类型或大小可通过前端验证（如
accept属性）和后端检查（如$_FILES['file']['size']）。 - 对于大文件，可能需要调整服务器的
upload_max_filesize和post_max_size（PHP 配置）。
其他插件推荐
如果需要更复杂的功能（如多文件上传、拖拽上传），可以考虑以下 jQuery 插件：
- Dropzone.js：支持拖拽上传和预览。
- jQuery File Upload：提供多文件上传、进度条和预览功能。
- Fine Uploader：支持分块上传和断点续传。
