正在通过 jQuery 和 PHP 上传图像文件

Question

我一直在尝试上传一张从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);
}

Answer 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 文件。

Answer 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);

Answer 3

一些小错误，否则就差不多了。

在 reader.onload 中，您正在使用 document.querySelector('input[type=file]').files[0]['name'];，这将 select 只有第一个文件（请参阅常量 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;

正在通过 jQuery 和 PHP 上传图像文件

Uploading image file through jQuery with PHP

javascript

php

jquery

uploading

image-uploading

jQuery代码

PHP代码