Question

我希望用户在使用php和Jquery上传图像后立即显示图像？我尝试了以下代码。它不工作？有任何更正吗？

我的index1.php文件

   <script language="javascript"> 
   <?php
   if(isset($_FILES['image']))
   {
   $file_name = $_FILES['image']['name'];
   $file_tmp = $_FILES['image']['tmp_name']; 
   }
   $picture= $file_tmp."/".$file_name;
   ?>
   </script>
   <html>
   <head>
   Disp
   </head>
   <body>
   <form name="example" action ="index1.php" method="post" enctype="multipart/form-data">    
   Choose an image
   <input type = "file" name="image" />
   <input type="submit" value="submit"/>
   </form>
   <div id="content">
   The uploaded picture must come here
   </div>
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/imagedisplay.js"></script> 

   </body>
   </html>

我的jquery文件是imagedisplay.js

   $(document).ready(function(){
   $('input[type="file"]').change(function(){
   $(this).parent().submit();       
   $("#content").html('<img src="<?php echo $picture; ?>" >');

   });
   });
Thanks in advance.

Answer 1

在PHP本身中调用脚本 - 你无法在JS文件中运行像<?php echo $picture; ?>这样的php代码，只需使用：

echo '<script type="text/javascript"> /* imagedisplay.js content */ </script>;

Answer 2

你的问题是你不明白PHP是什么。它是一种服务器语言，一种预处理器。一旦页面被加载并发送给用户，所有的PHP都是GONE，因为它所做的所有工作都是在服务器端完成的。因此，预处理器。

你需要做的是制作一个单独的PHP文件，它将从jQuery发布的图像作为参数，并返回它的元数据，然后发布到该文件。

Answer 3

您不希望在更改事件中包含此内容：

$("#content").html('<img src="<?php echo $picture; ?>" >');

因为您的更改事件刚刚重新提交了该页面。你应该做一些if语句，如果设置了$ picture，那么显示代码：

 <?php if ($picture): ?>
    <script type="text/javascript"> 
        $("#content").html('<img src="<?php echo $picture; ?>">'); 
    </script>
<?php endif; ?>

<强> EDITED

此外，将您的tmp文件复制到您的Web服务器（apache）可以读取的文件夹中：

if(isset($_FILES['image'])) {
    $file_name = $_FILES['image']['name']; 
    $file_tmp = $_FILES['image']['tmp_name'];
    $newDir =  "/webdir-on-file-system";
    $staticUrl = "http://static.url";
    move_uploaded_file($file_tmp, $newDir . "/" .$file_name);
    $picture = $staticUrl . "/" .$file_name;
}

另外，请确保您具有复制到$ newDir

的适当权限

使用PHP和Jquery提交上传后加载图片？不工作

3 个答案: