просмотреть предварительный просмотр изображения перед формой отправить

Question

Я создаю социальный сайт. Предусмотрена возможность хранения изображений во время регистрации пользователей. Я хочу отобразить предварительный просмотр изображения, когда пользователь загружает изображение, прежде чем форма получит отправил. Пожалуйста, помогите мне.

Это мой код в регистрационном разделе

<form action="insert_scene.php" 
method="post" id="sceneform" enctype="multipart/form-data"> 
<label for="image">Scene Flyer:</label> 
<img src="" width="120" height="130" alt="Scene Pic" /> 
<a href="" onclick="return uploadimg()" > Upload</a></li> 
<input type="file" name="file" id="file" style="display:none;" /> 
</form> 

Javascript содержание

function uploadimg() 
{ 
    var uploader = document.getElementById('file'); 
    uploader.click(); 
    return false; 
} 

Это сегмент кода в insert_scene.php (На самом деле следующий сегмент кода помещается в другой файл который включен в состав insert_scene.php)

<?php 
ini_set('memory_limit','128M'); 
ini_set("post_max_size", "10M"); 
ini_set("upload_max_filesize", "10M"); 
echo "Upload: " . $_FILES["file"]["name"] . "<br />"; 
if ($_FILES["file"]["error"] > 0) 
{ 
    $fileN = ''; 
echo 'File Size:' .($_FILES["file"]["size"]/1024); 
} 
else 
{ 

$maxImgSize=($_FILES["file"]["size"]/1024); 

if($maxImgSize>=5121 || $maxImgSize==0){ 

    $fileN = ''; 
} 
else{ 

move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]); 

    $fileN="upload/" . $_FILES["file"]["name"]; 

    while(file_exists($fileN)){ 
     $fileN="upload/" . md5($fileN).$_FILES["file"]["name"]; 
    } 

    rename("upload/" . $_FILES["file"]["name"], $fileN); 


     } 
    } 
    ?> 
    $scene_flyer = $fileN; 

После отправки формы $scene_flyer получает адрес изображения. Но я хотел бы показать предварительный просмотр до того, как форма на первой странице будет отправлена. Пожалуйста, помогите мне.

Answer 1

Улучшите свой код и загрузите jQuery.

http://www.uploadify.com/demos/

Затем написать простой код в OnUploadSuccess событий:

http://www.uploadify.com/documentation/uploadify/onuploadsuccess/