php+jquery实现的图片批量压缩上传
来源:自通100 发布时间:2023-03-04 17:03:46 浏览:47
要使用PHP和jQuery实现图片批量压缩上传,需要进行以下步骤:
- HTML部分上传
<form id="upload-form">
<input type="file" id="upload-input" name="files[]" multiple>
<button type="submit" id="upload-btn">上传</button>
</form>
<div id="preview"></div>这里我们使用了HTML5的多文件上传功能,允许用户选择多个图片进行上传。当用户选择文件后,我们需要使用JavaScript进行图片预览和压缩处理。
2. JavaScript部分
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lrz/dist/lrz.all.bundle.min.js"></script>
<script>
$(function() {
$('#upload-input').on('change', function() {
$('#preview').empty();
$.each(this.files, function(i, file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = $('<img>').attr('src', e.target.result);
$('#preview').append(img);
lrz(file, {width: 800}).then(function(rst) {
img.attr('src', rst.base64);
});
};
reader.readAsDataURL(file);
});
});
$('#upload-form').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(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
});
</script>这里我们使用了jQuery库和lrz插件,lrz插件是一个非常好用的图片压缩插件,可以将图片压缩到指定的大小和宽度。
在用户选择文件后,我们使用JavaScript进行文件预览和压缩处理。将每个压缩后的图片显示在预览区域中。在上传按钮点击后,我们将使用jQuery的ajax方法将压缩后的图片上传到服务器。
3. PHP部分
<?php
if (isset($_FILES['files'])) {
$files = $_FILES['files'];
$upload_dir = 'uploads/';
foreach ($files['tmp_name'] as $key => $tmp_name) {
$name = $files['name'][$key];
$tmp_name = $files['tmp_name'][$key];
move_uploaded_file($tmp_name, $upload_dir . $name);
}
echo '上传成功';
} else {
echo '请选择要上传的文件';
}
?>
在PHP代码中,我们将上传的文件保存到指定的目录中,并输出上传成功的信息。需要注意的是,在PHP代码中并没有进行图片压缩处理,因为我们已经在JavaScript中使用了lrz插件进行了压缩处理。
以上就是使用PHP和jQuery实现图片批量压缩上传的完整代码。
下一篇:到底了……