编辑：

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>

比PHP文件：

<?php

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

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

echo $image;

＆GT;

然后应该回应它。当我在Firefox的开发人员控制台中时，我可以看到从服务器发回的正确图片。但是在HTML文件的输出框中，只有代码像这样：

JFIF`` C

C “ }！1AQa”q2 ＃B R $3br   ％安培;'（）* 456789：CDEFGHIJSTUVWXYZcdefghijstuvwxyz    w！1AQaq“2 B ＃3R br   $ 4％＆安培;'（）* 56789：CDEFGHIJSTUVWXYZcdefghijstuvwxyz ？EW.QEQEWxgι   H | ^gqjj͓＃* YNץ| 8 IX-J（1）4VC   ѬX9�^'�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�e我

等等......

我必须做什么才能成为正常的形象？

Answer 1

你看到的是什么（丑陋的角色）是图像。它是您尝试放入"#ausgabe"元素的图像的原始二进制值。这是关于使用文本编辑器打开图像时会看到的内容（取决于编码）。

您想要的内容是在上传完成后显示图片（尽管您可以在此之前显示＆gt;＆gt; Take a look at this post）。所以基本上你想要用<img />抛出一个src="some_url_that_shows_your_image"标签。这是完美的，因为它确实是你的php文件：一个显示图像并在其上方具有正确标题的URL。问题是它只在上传$_FILES时显示图像。

我不确定这是唯一的方法，但您必须将上传PHP脚本与显示图像的PHP分开。为此，您可以将原始二进制图像数据存储在一个文件中（然后它将成为图像，可通过URL访问）或存储在MySQL数据库中作为BLOB（或多次使用MEDIUMBLOB）。然后你的第二个PHP脚本将获取一个图像，其中id可从$_GET访问，并使用header("Content-Type: image/jpg");

投放数据

但我认为你仍然应该看看在你上传之前显示图像的解决方案，然后以某种方式上传和存储图像（文件或BLOB在数据库中）。

编辑：

实际上还有另一种选择，但我个人认为使用它并不是一个好主意，因为它可能会加载你的DOM太多，特别是如果上传的图片很大：在HTML中你可以将图像的src设置为base64编码的原始数据。像这样的东西

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

对于这种情况，您可以获得最简单的解决方案，但如果可以，请考虑使用另一种解决方案......

如果你想尝试这个，你应该有一个像这样的PHP：

<?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;
?>

然后对于客户端你会去：

<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>

Jquery图片上传不起作用

1 个答案:

编辑：