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

Question

I have been trying to upload an image to my server from jQuery to PHP, but the uploaded content is always invalid image. I could not identify the error whether I was encoding or decoding it wrong. How can I fix this?

jQuery code

$("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 code

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

First make sure you get the Base64 code on the server. For example, you can echo, etc.

Then assuming your image Base64 code was in $_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);

Using the above lines you can save the image as a file from Base64.

Answer 2

In jQuery do it this way:

$.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);
}

What I see is the you are encoding it wrongly in this line

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

Answer 3

A few small mistakes, otherwise it's almost working.

In reader.onload you are using document.querySelector('input[type=file]').files[0]['name']; which would select only the first file (see the constant files[0] ). So instead of manually searching you can use file parameter of each loop to get filename and type:

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

In PHP code, a small mistake:

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

urldecode cannot decode Base64 . For that, use base64_decode :

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