查看表单提交前的图像预览

我正在创建一个社交网站。在用户注册期间提供了用于存储图像的条款。我想在用户上传图像时显示图像的预览，请帮助我。查看表单提交前的图像预览

这是我在登记部分代码

<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获取图片地址。但是我想在第一页中的表格被提交之前显示预览。请帮助我。

来源

2013-02-27 Techy

我不认为你能做到这一点，张贴票据图像之前仍是本地机器。但你可以使用AJAX并显示图像。 – 2013-02-27 09:22:13

@Prasanth Bendra图像的预览如何显示在脸书然后？ – Techy 2013-02-27 09:23:26

正如我所说，你可以使用AJAX，当用户选择图像时，它将被上传到服务器，并将显示在那里。用户以后会提交表格 – 2013-02-27 09:25:37

改进您的代码并使用jQuery uploadify。

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

然后写一些简单的代码在事件OnUploadSuccess：

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

来源

2013-02-27 09:23:39 Ghigo

这也可以用于图片上传。其实我也需要显示图片 – Techy 2013-02-27 09:27:41

php上传脚本可以返回OK：http：//your.site。 com/img/temp/picture_uploaded_XXXXXXX.jpg 在OnUploadSuccess事件中，只需检查数据是否以“OK：”开头，然后使用temp上传的图像url更改image.src。 $（“#preview_image”）.attr（“src”，“http://your.site.com/img/temp/picture_uploaded_XXXXXXX.jpg”）; – Ghigo 2013-02-27 09:32:45

我们不需要任何jQuery库？ – Techy 2013-02-27 09:51:38

查看表单提交前的图像预览

回答

相关问题