Jquery picture upload not working

Question

<html>

<head>
  <script type="text/javascript" src="jquery.js"></script>
  <!-- Jquery -->
</head>

<body>
  <form id="uploadForm" action="upload.php" method="post">
    <label>Upload Image File:</label>
    <br/>
    <input name="image" type="file" />
    <input type="submit" value="Submit" />
  </form>
  <div id="ausgabe"></div>



  <script type="text/javascript">
    $(document).ready(function(e) {
      $("#uploadForm").on('submit', (function(e) {
        e.preventDefault();
        $.ajax({
          url: "http://something.de/bildtest.php",
          type: "POST",
          data: new FormData(this),
          contentType: false,
          processData: false,
          success: function(data) {
            $("#ausgabe").html(data);
          },
          error: function() {}
        });
      }));
    });
  </script>
</body>

</html>

Than a PHP file:

<?php

header('Access-Control-Allow-Origin: *');
header("Content-type: image/jpg");

//File Propeties
$image = file_get_contents($_FILES['image']['tmp_name']);

echo $image;

?>

Then it should echo it. When i am in the developer console of firefox i can see the right picture which is send back from the server. But in the output box in HTML file thers only code Something like this:

��JFIF``��C

��C��"�� }!1AQa"q2��#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�� w!1AQaq"2�B�� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��?�EW��.QEQEW�xg��ι�� h�|^��gq�jj�͓#��*Y�N�ץ|8��Ix��-��j^��4��vc ѬX��9�^'�2� ��֗��u��s谼'��T�I��[��ץ�w�%�^��q~Ȳ~��t�WX�5K_�YN�#�WqFI�0�L��? ~�_�$h��<��W��r!TN8^�2�b0�J_�j��N��y�̳��Z6��-m��h�P�~x�N��)nu?�%ȃ\�� c��qk/�e/)�N�� #msR|��>�Z��tx!ߝ"�[GP��M�B�eI�

And so on...

What do i have to do that it becomes a normal image?

http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php — Niklesh Raut, Feb 02 '16 at 13:22

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

What you see (the ugly looking characters) IS the image. It's raw binary value of the image that you're trying to put in your "#ausgabe" element. That's about what you would see if you opened the image with a text editor (depending on the encoding).

What you want is to show an image when upload is finished (although you could show it even before that >> Take a look at this post). So basicly you want to throw an <img /> tag with src="some_url_that_shows_your_image". Which is perfect because that's exactly what your php file is : an url that shows an image and with the correct header on top of that. The problem is that it only shows the image when $_FILES are uploaded.

I am not sure that it's the only way but you have to separate the upload PHP script from the PHP that shows the image. For this, you could store the raw binary image data in a file (then it becomes the image, accessible with an URL) or in a MySQL Database as a BLOB (or MEDIUMBLOB most times). Then your second PHP script would go fetch an image with a given id accessible from $_GET and throw the data with the header("Content-Type: image/jpg");

But I think you should still take a look at the solution where you show the image before it's uploaded then just upload and store the image somehow (file or BLOB in a database).

EDIT :

Actually There is another option but I personnaly think it's not a good idea to use it because it could load your DOM too much especially if the image uploaded is big : In HTML you can set the src of an image to be base64 encoded raw data. Something like this

<img src="data:image/gif;base64,R0lGODlhWFhcXFxgYGaGhsbGxwcHB0dHR4eHh8fHyAgICEhISk5OTo6s7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkND..." />

For the case you have it's the easiest solution to achieve but consider using another one if you can...

If you want to try this you should have a PHP looking like this :

<?php
header('Access-Control-Allow-Origin: *');

//File Encoded in base64 with the right prefix to be put right in the src

$image = 'data:image/gif;base64,';
$image .= base64_encode(file_get_contents($_FILES['image']['tmp_name']));

echo $image;
?>

then for client-side you would go :

<html>

<head>
  <script type="text/javascript" src="jquery.js"></script>
  <!-- Jquery -->
</head>

<body>
  <form id="uploadForm" action="upload.php" method="post">
    <label>Upload Image File:</label>
    <br/>
    <input name="image" type="file" />
    <input type="submit" value="Submit" />
  </form>
  <img id="ausgabe" style="display: none" />



  <script type="text/javascript">
    $(document).ready(function(e) {
      $("#uploadForm").on('submit', (function(e) {
        e.preventDefault();
        $.ajax({
          url: "http://something.de/bildtest.php",
          type: "POST",
          data: new FormData(this),
          contentType: false,
          processData: false,
          success: function(data) {
            // Sorry : I don't know jQuery
            var image = document.getElementById('ausgabe');
            image.src = data;
            image.style.display = 'block';
          },
          error: function() {}
        });
      }));
    });
  </script>
</body>

Thanks for this perfectly posted answer, but it doesn't work. I have just copyed all but now i am getting a picture of a broken image, which shows me that there is something wrong. :/ — T. Jansen, Feb 02 '16 at 13:44
I'm glad it worked for you. Please set the question as [solved] :). — M. Kejji, Feb 04 '16 at 16:08

Jquery picture upload not working

1 Answers1

EDIT :