查看錶單提交前的圖像預覽

我正在創建一個社交網站。在用戶註冊期間提供了用於存儲圖像的條款。我想在用戶上傳圖像時顯示圖像的預覽，請幫助我。查看錶單提交前的圖像預覽

這是我在登記部分代碼

<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

查看錶單提交前的圖像預覽

回答

相關問題