jquery 上传文件
jQuery 上传文件的方法
使用 jQuery 上传文件可以通过多种方式实现，以下是常见的几种方法：
使用 FormData 和 AJAX
通过 FormData 对象收集表单数据，并使用 AJAX 发送到服务器。
$('#fileUploadForm').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 File Upload 提供了更丰富的功能，例如多文件上传、进度条等。
$('#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 + '%');
}
});使用 HTML5 File API
结合 HTML5 的 File API 可以实现更灵活的文件操作。
$('#fileInput').change(function() {
var file = this.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
};
reader.readAsDataURL(file);
}
});服务器端处理示例（PHP）
接收上传的文件并保存到服务器。
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempName = $_FILES['file']['tmp_name'];
$targetPath = 'uploads/' . basename($_FILES['file']['name']);
move_uploaded_file($tempName, $targetPath);
echo '文件上传成功';
} else {
echo '文件上传失败';
}注意事项
- 确保表单包含
enctype="multipart/form-data"属性。 - 检查服务器配置是否允许文件上传（如
upload_max_filesize和post_max_size）。 - 对上传的文件进行验证，防止安全风险（如文件类型、大小限制）。
