jquery上传图片
jQuery 实现图片上传的方法
使用 FormData 和 AJAX
HTML 部分需要包含一个文件输入框和一个上传按钮：
<input type="file" id="fileInput" accept="image/*">
<button id="uploadBtn">上传图片</button>
<div id="preview"></div>JavaScript 部分使用 jQuery 处理文件选择和上传：
$(document).ready(function() {
$('#uploadBtn').click(function() {
var file = $('#fileInput')[0].files[0];
if (!file) {
alert('请选择图片文件');
return;
}
var formData = new FormData();
formData.append('image', file);
$.ajax({
url: 'upload.php', // 替换为实际后端接口
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
alert('上传成功');
$('#preview').html('<img src="' + response.path + '">');
},
error: function() {
alert('上传失败');
}
});
});
});图片预览功能
在文件选择后立即显示预览：
$('#fileInput').change(function() {
var file = this.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
$('#preview').html('<img src="' + e.target.result + '">');
}
reader.readAsDataURL(file);
}
});后端处理示例 (PHP)
<?php
if ($_FILES['image']['error'] === UPLOAD_ERR_OK) {
$tempPath = $_FILES['image']['tmp_name'];
$uploadPath = 'uploads/' . basename($_FILES['image']['name']);
if (move_uploaded_file($tempPath, $uploadPath)) {
echo json_encode(['path' => $uploadPath]);
} else {
http_response_code(500);
}
} else {
http_response_code(400);
}
?>进度条显示
添加上传进度监控：
$.ajax({
// ...其他参数...
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log(percent + '%');
}
}, false);
return xhr;
}
});多文件上传支持
修改 HTML 和 JavaScript 以支持多文件：
<input type="file" id="fileInput" multiple accept="image/*">var files = $('#fileInput')[0].files;
var formData = new FormData();
$.each(files, function(i, file) {
formData.append('images[]', file);
});注意事项
- 确保服务器 uploads 目录有写入权限
- 限制上传文件大小可在 php.ini 中设置 upload_max_filesize
- 考虑添加文件类型验证
- 生产环境应重命名上传文件避免冲突
