使用 PHP 通过 jQuery 上传图像文件答案

【问题标题】：Uploading image file through jQuery with PHP使用 PHP 通过 jQuery 上传图像文件
【发布时间】：2017-03-27 18:10:03
【问题描述】：

我一直在尝试将图像从 jQuery 上传到我的服务器到 PHP，但上传的内容始终是无效图像。我无法识别错误是否编码或解码错误。我该如何解决这个问题？

jQuery 代码

$("input[type=file]").change(function(event) {
  $.each(event.target.files, function(index, file) {
    var reader = new FileReader();
    reader.onload = function(event) {
      var object = {};
      object.filename = document.querySelector('input[type=file]').files[0]['name'];;
      object.data = encodeURI(event.target.result);
      object.filetype = document.querySelector('input[type=file]').files[0]['type'];
      files.push(object);
    };
    reader.readAsDataURL(file);
  });
});

$("form").submit(function(form) {
  $.each(files, function(index, file) {
    $.ajax({url: "handle.php",
            type: 'POST',
            data: {fileName: file.filename, data: file.data, fileType: file.filetype},
            success: function(data) {
                $('#data').html(data);
            }
    });
  });
  files = [];
  form.preventDefault();
});

PHP 代码

if (isset($_POST["data"]) || isset($_POST["fileName"])) {
    $data = $_POST["data"];
    $fileName = $_POST["fileName"];
    $fileType = $_POST["filetype"];

    $replace = "data:" . $fileType . ";base64,";
    $filedata = str_replace($replace, "", $data); // echo $filedata;
    $decodedData = urldecode($filedata); // echo $decodedData;

    $fp = fopen('uploads/' . $fileName, "w");
    fwrite($fp, $decodedData);
    fclose($fp);
}

【问题讨论】：

为什么发送 base64 编码的东西只是为了预览为什么不使用 formData 发送原始文件（文件控制）？
@Novice 问题是我想处理多个文件，用户可能会选择一个文件，然后在上传文件之前将其删除，并且无法从原始 $_FILE[ 中删除文件'文件']。
是的，我同意，在下面添加了答案
不明白您对FormData 的问题...它比base64 更快且好约9 倍

标签： javascript php jquery image-uploading uploading

【解决方案1】：

首先确保您在服务器上获得了Base64 代码。比如可以echo等。

然后假设您的图像 Base64 代码在 $_POST['image'] 中：

$data = $_POST['image']
$data = str_replace('data:image/png;base64,', '', $data);

$data = base64_decode($data); // Base64 decoded image data

$source_img = imagecreatefromstring($data);

$imageSave = imagejpeg($source_img, $file, 10);

imagedestroy($source_img);

使用上述行，您可以将图像保存为来自 Base64 的文件。

【讨论】：

这个：str_replace(' ', '+', $data) 有什么作用？并且没有必要做整个imagecreatefromstring()、imagejpeg() 和imagedestroy()。在base64_decode之后，你可以将图像内容保存到文件中。
删除了该行。删除凭证空白是额外的。但好消息不应该在那里。
我从 jquery 回显 $_POST['data'] 并到达服务器，但我的图像仍然无效。
你确实添加了这一行
$data = str_replace('data:image/png;base64,', '', $data);

【解决方案2】：

在 jQuery 中这样做：

$.each(event.target.files, function(index, file) {
    var FR = new FileReader();
    FR.onload = function(e) {
        object.data = e.target.result; };
        FR.readAsDataURL(this.files[0]);
    }
    FR.readAsDataURL(file);
}

我看到的是你在这一行编码错误

object.data = encodeURI(event.target.result);

【讨论】：

我认为这不会编译。有两个{s 和三个}s。

【解决方案3】：

一些小错误，否则它几乎可以工作。

在reader.onload 中，您使用的是document.querySelector('input[type=file]').files[0]['name'];，它只会选择第一个文件（请参阅常量files[0]）。因此，您可以使用each 循环的file 参数来获取文件名和类型，而不是手动搜索：

var files = [];
$("input[type=file]").change(function(event) {
  $.each(event.target.files, function(index, file) {
    var reader = new FileReader();
    reader.onload = function(event) {
      var object = {};
      object.filename = file.name;
      object.data = encodeURI(event.target.result);
      object.filetype = file.type;
      files.push(object);
   };
   reader.readAsDataURL(file);
  });
});

在PHP代码中，一个小错误：

$fileType = $_POST["filetype"]; // <-- small "t"

urldecode 无法解码 Base64。为此，请使用base64_decode：

$decodedData = base64_decode($filedata); // echo $decodedData;

【讨论】：