在提交表单之前查看图像预览

view the preview of the image before form submit

本文关键字：图像 提交 表单      更新时间：2023-09-26

我正在创建一个社交网站。在用户注册期间有存储图像的规定。我希望在提交表单之前，在用户上传图像时显示图像的预览。请帮帮我。

这是我在注册部分的代码

<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获得图像地址。但我想在第一页提交表单之前显示预览。

改进你的代码并使用jQuery上传。

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

然后在OnUploadSuccess: 事件中编写一些简单的代码http://www.uploadify.com/documentation/uploadify/onuploadsuccess/

相关文章：