PHP-上传图片并显示在页面上

下面的代码允许我上传图片（使用html表单）到服务器上的目录

<?php 

    $target = "http://www.mockcourt.org.uk/user/htdocs/pics/2012/";
    $target = $target . basename( $_FILES['uploaded']['name']); 
    $ok=1; 

    if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) 
    {
        echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
    } 
    else
    {
        echo "Sorry, there was a problem uploading your file.";
    }
?>

有没有办法修改它，让它将图片添加到html页面

---

谢谢

上传后，您可以使用javascript将其放到html页面上

不过，我不太确定你的问题是什么

编辑：

因此，页面上的html表单：

<form action="imageUpload.php" method="post" enctype="multipart/form-data" target="upload_target"  onsubmit="jupload();"  id="form1" >
    <div style="visibility:'hidden';" class="imageholder"> <!-- a gif image to show that the process wasn't finished -->
    </div>
    <input type="file" name="imgfile" /> 
    <input type="submit" name="uploadButton" class="upbtn" value="Submit" />
</form>

上传和图像添加的Javascript（JQUERY）代码：

function jupload()
{
    $(".imageholder").append('<img src="./images/loading.gif">');
}

function juploadstop(result)
{
    if(result==0)
    {
        $(".imageholder").html("");

    }
    // the result will be the path to the image
    else if(result!=0)
    {
        $(".imageholder").html("");
        // imageplace is the class of the div where you want to add the image  
        $(".imageplace").append("<img src='"+result+"'>");
    }   
}

函数jupload（）
{
$（“.imageholder”）。附加（“”）；
}
功能juploadstop（结果）
{
如果（结果==0）
{
$（“.imageholder”）.html（“”）；
}
//结果将是图像的路径
否则如果（结果！=0）
{
$（“.imageholder”）.html（“”）；
//imageplace是要添加图像的div的类
$（“.imageplace”）。追加（“”）；
}   
}

php代码：

<?php
    $target = "http://www.mockcourt.org.uk/user/htdocs/pics/2012/";
    $target = $target . basename( $_FILES['uploaded']['name']) ; 
    $ok=1; 

    if (move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)) 
    {
        $result=$target;
    } 
    else
    {
        $result=0;
    }
?>

<script language="javascript" type="text/javascript">
    window.top.window.juploadstop(<?php echo $result; ?>);
</script>

window.top.window.juploadstop（）；

假设您有HTML格式的表单来提交图像。。制作“提交”按钮，而不是“提交”按钮，只是一个按钮。。e、 g

<input type='button' id='submit_form' value='upload' />

在javascript中，使用Ajax提交表单，使用Jquery在网页中显示表单

$('#submit_form')click(function(){
  $.ajax({
    type: 'POST',
    url: path/phpfile.php,
    data: image_input_name
  });

//after submitting, get the url of the image form the server

  $('#div_to_display_image').html("<img src='path/image_file.jpg' alt='this' />");

});

$（'submit_form'）点击（函数（）{
$.ajax({
键入：“POST”，
url:path/phpfile.php，
数据：图像\输入\名称
});
//提交后，从服务器获取图像的url
$（'#div_to_display_image'）.html（“”）；
});

---

希望这有帮助：-）

选择文本，然后按Ctrl+K将整个文本块缩进四个空格，使其成为代码块。每行周围的单个回勾使其无法读取！我想一个scrpit，允许用户上传一张图片，它会自动将图片放到一个页面上。如果上面有图片，则会将新图片添加到页面中。您可以使用uploadify，一旦上传，您可以将其显示到html页面。我希望这会有所帮助，尽管Rakesh Shetty的解决方案可能会更快、更容易理解。将图像添加到dom应该在成功响应后的回调中进行。目前看来，这是行不通的。