点击上传后显示图片

Question

如何在点击上传按钮后立即显示图片？

这是我的 HTML 代码：

form.php

<html>
<body>

<form action="uploadFile.php" method="post" enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="file" id="file"><br>
    <input type="submit" name="submit" value="Submit">
</form>

</body>
</html>

这是我的uploadFile.php代码：（已更新，但仍然没有得到任何结果）

<?php
       // prevent timezone warnings
       date_default_timezone_set('Philippines/Manila');

      // set the upload location
      $UPLOADDIR = "images/";

        // if the form has been submitted then save and display the image(s)
    if(isset($_POST['Submit'])){
      // loop through the uploaded files
foreach ($_FILES as $key => $value){
    $image_tmp = $value['tmp_name'];
    $image_type=$value['type'];
    $image = $value['name'];
    $image_file = "{$UPLOADDIR}{$image}";

 //check if there's existing file name
  if ($image  != 0){
echo 'File Already Exists!';
}

  else {
    // move the file to the permanent location

  if(move_uploaded_file($image_tmp,$image_file)){

// this is where the displaying part goes
    echo <<<HEREDOC

    <div style="float:left;margin-right:10px">
        <img src="$editedShear" alt="This is your image" height=200 width=200/></br>
    </div>

HEREDOC;

    }
    else{
        echo "<h1>image file upload failed, image too big after compression</h1>";
         }
        }
}}
 else{
  ?>

<?php
 }
?>

Answer 1

在表单后添加iframe：

<iframe name="resultFrame" width="500" height="300"></iframe>

然后在表单中添加target="resultFrame" 属性，如下所示：

<html>
    <body>    
        <form action="uploadFile.php" method="post"
enctype="multipart/form-data" target="resultFrame">
            <label for="file">Filename:</label>
            <input type="file" name="file" id="file"><br>
            <input type="submit" name="submit" value="Submit">
        </form>

        <iframe name="resultFrame" width="500" height="300"></iframe>

    </body>
</html>

Answer 2

上传图片并在同一页面上显示上传图片的最简单方法是什么？ 页面“index.php”

<body>
<div id="body">
	<form action="upload.php" name="img_compress" method="post" enctype="multipart/form-data">
	<input type="file" name="file" />
	<button type="submit" name="btn-upload">upload</button>
	</form>
    <br /><br />
    <?php
	if(isset($_GET['success']))
	{
		?><br><br><br>
        
    <?php
	$sql="SELECT * FROM tbl_uploads ORDER BY id DESC";
	$result_set=mysql_query($sql);
	while($row=mysql_fetch_array($result_set))
    {
		?>
     <img src="uploads/<?php echo $row['file'] ?>" width="100%" height="100%">
    <?php
}
	?>
   
        <?php
	}
	else if(isset($_GET['fail']))
	{
		?>
        <label>Problem While File Uploading !</label>
        <?php
	}
	else
	{
		?>
        <label>Try to upload any files(PDF, DOC, EXE, VIDEO, MP3, ZIP,etc...)</label>
        <?php
	}
	?>
</div>
</body>

上传“upload.php”的代码

<?php
include_once 'dbconfig.php';
if(isset($_POST['btn-upload']))
{    
     
	$file = $_FILES['file']['name'];
    $file_loc = $_FILES['file']['tmp_name'];
	$file_size = $_FILES['file']['size'];
	$file_type = $_FILES['file']['type'];
	$folder="uploads/";
	
	$new_size = $file_size/1024;  
	
	$new_file_name = strtolower($file);
	
	$final_file=str_replace(' ','-',$new_file_name);
	
	if(move_uploaded_file($file_loc,$folder.$final_file))
	{
		$sql="INSERT INTO tbl_uploads(file,type,size) VALUES('$final_file','$file_type','$new_size')";
		mysql_query($sql);
		?>
		<script>
        window.location.href='index.php?success';
        </script>
		<?php
	}
	else
	{
		?>
		<script>
		alert('error while uploading file');
        window.location.href='index.php?fail';
        </script>
		<?php
	}
}
?>

下面一个是用于存储图像的字段 enter image description here

Answer 3

/* i put image so that it has default

    <img id="blah" src="images/male.png" alt="your image" style="width:250px;height:200px;" />

/*put accept and its format so that you can only choose the image only

<input type='file' name="image"  onchange="readURL(this);" accept="image/gif,image/png,image/jpg,image/jpeg" />

/*changing the url of an image you can do it in jquery
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
/*set the width and height of an image
                    .width(250)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

然后做你的上传代码

Answer 4

将您的图片上传到包含您的 php/html 文件的文件夹中， 并在 img 标签中写下 img 名称：

<img src="<?php echo $img;?>" width="400" height="600"/>

Answer 5

为此，您需要使用某种 ajax 上传来上传图像。如果您不知道那是什么，请在此处阅读http://en.wikipedia.org/wiki/Ajax_%28programming%29。您可以在线找到一些免费的解决方案和示例。在这里，我发现了一个堆栈溢出问题，它可能会帮助您提供此类解决方案的链接

Ajax file upload