系统首页

php+jquery实现的图片批量压缩上传

来源:自通100    发布时间:2023-03-04 17:03:46    浏览:47

要使用PHP和jQuery实现图片批量压缩上传,需要进行以下步骤:

  1. 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实现图片批量压缩上传的完整代码。


上一篇:使用VSCode创建一个Vue项目

下一篇:到底了……

标签云