javascript - 在提交到 PHP 上传之前在客户端调整图像大小

Question

嗯，你好。

我目前正在使用 here 中的这个 javascript 库在客户端调整图像大小。我已经使用以下代码成功调整了客户端的图像大小:

document.getElementById('foto_select').onchange = function(evt) {
  ImageTools.resize(this.files[0], {
    width: 623, // maximum width
    height: 203 // maximum height
  }, function(blob, didItResize) {
    // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
    document.getElementById('preview').src = window.URL.createObjectURL(blob);
    var hidden_elem = document.getElementById("foto");
    hidden_elem.value = window.URL.createObjectURL(blob);
    // you can also now upload this blob using an XHR.
  });
};

<script src="https://gist.githubusercontent.com/dcollien/312bce1270a5f511bf4a/raw/155b6f5861e844310e773961a2eb3847c2e81851/ImageTools.js"></script>


<form action="save.php?p=edit_headline" method="post" enctype="multipart/form-data">

<div align="center">
  <input type="file" id="foto_select" name="foto_select" />
  <input type="hidden" id="foto" name="foto" />
  <div class="spacer-20"></div>
  Preview : <br/>
  <img id="preview" width="240" height="240" />
</div>

</form>

好了，图片已成功上传并在客户端调整了大小。但问题是我需要将存储在客户端表单上的文件提交到 php 服务器端处理中。 BLOB 数据存储在名为 foto 的隐藏输入中。

这是我的 PHP 代码:

<?php

    $imgFile = $_FILES['foto']['name'];
    $tmp_dir = $_FILES['foto']['tmp_name'];
    $imgSize = $_FILES['foto']['size'];

    $upload_dir = '../admin/images/headline/'; // upload directory

    $imgExt = strtolower(pathinfo($imgFile, PATHINFO_EXTENSION)); // get image extension

    // valid image extensions
    $valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions

    // rename uploading image
    $photo = rand(1000, 1000000) . "." . $imgExt;

    // allow valid image file formats
    if (in_array($imgExt, $valid_extensions)) {
        // Check file size '5MB'
        if ($imgSize < 5000000) {
            move_uploaded_file($tmp_dir, $upload_dir . $photo);
        } else {
            $errMSG = "Sorry, your file is too large.";
            echo "<script>alert('File foto terlalu besar'); window.location ='berita.php' </script>";
        }
    } else {
        $errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    }

    if (empty($imgFile)) {
        $photo_save = $foto_old;
    } else {
        $photo_save = $photo;
        unlink("images/headline/". $foto_old); // upload directory
    }

    $query = mysqli_query($con, "UPDATE `headline` SET `photo` = '$photo_save' WHERE `id` = '$id'");
    if ($query) {
        echo "<script>alert('Headline Updated'); window.location ='index.php' </script>";
    } else {
        echo "<script>alert('Failed'); window.location ='index.php' </script>";
    }

?>

照片已在 mysql 数据库中更新，但文件未从客户端输入表单复制到服务器文件夹目标。

我需要有关此问题的帮助，我可能会避免使用 XHR/AJAX 方法，因为它会更改整个代码。任何帮助将不胜感激。

提前致谢。

Answer 1

由于您的文件位于 blob 字段中，因此只需使用 file_put_contents 函数将文件数据保存到所需的目的地，例如

file_put_contents('/path/to/new/file_name', $_POST['foto']);

不需要整个 move_uploaded_file 部分。只需将其视为正常请求并使用 foto 字段中的值来保存图像即可。