アップロード時に画像プレビューを取得

Question

画像をアップロードしてから、同じページ（#AJAX）に画像のサムネイルプレビューを表示する必要があります。誰も私にいくつかのポインタを提供できますか？

Answer 1

おそらくあなたがアップロードしているサーバーはどこかにイメージを保存し、それをいくつかのURL経由で利用可能にするでしょう。もしそうなら、あなたがする必要があるのは、アップロードリクエストへの応答の一部としてサーバーがイメージのURLを返すようにしてから、画像に新しい<img>タグを追加するJavaScriptサーバー上で

帯域幅を節約するには、画像を適切なサムネイルサイズ（ImageMagickなど）にリサイズし、フルサイズの画像のURLの代わりにサムネイルのURLを返送することもできます。

Answer 2

index.htmlを

<script> 
function ajaxFileUpload(upload_field) 
{ 
// Checking file type 
var re_text = /\.jpg|\.gif|\.jpeg/i; 
var filename = upload_field.value; 
if (filename.search(re_text) == -1) { 
alert("File should be either jpg or gif or jpeg"); 
upload_field.form.reset(); 
return false; 
} 
document.getElementById('picture_preview').innerHTML = '<div><img src="images/progressbar.gif" border="0" /></div>'; 
upload_field.form.action = 'upload-picture.php'; 
upload_field.form.target = 'upload_iframe'; 
upload_field.form.submit(); 
upload_field.form.action = ''; 
upload_field.form.target = ''; 
return true; 
} 
</script> 

<!-- iframe used for ajax file upload--> 
<!-- debug: change it to style="display:block" --> 
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe> 
<!-- iframe used for ajax file upload--> 

<form name="pictureForm" method="post" autocomplete="off" enctype="multipart/form-data"> 
<div> 
<span>Upload Picture :</span> 
<input type="file" name="picture" id="picture" onchange="return ajaxFileUpload(this);" /> 
<span id="picture_error"></span> 
<div id="picture_preview"></div> 
</div> 
</form> 

アップロード-picture.php

<?php 
$upload_dir = 'upload/'; // Directory for file storing 
$preview_url = 'http://localhost/image_upload/upload/'; 
$filename= ''; 
$result = 'ERROR'; 
$result_msg = ''; 
$allowed_image = array ('image/gif', 'image/jpeg', 'image/jpg', 'image/pjpeg','image/png'); 
define('PICTURE_SIZE_ALLOWED', 2242880); // bytes 

if (isset($_FILES['picture'])) // file was send from browser 
{ 
if ($_FILES['picture']['error'] == UPLOAD_ERR_OK) // no error 
{ 
if (in_array($_FILES['picture']['type'], $allowed_image)) { 
if(filesize($_FILES['picture']['tmp_name']) <= PICTURE_SIZE_ALLOWED) // bytes 
{ 
$filename = $_FILES['picture']['name']; 
move_uploaded_file($_FILES['picture']['tmp_name'], $upload_dir.$filename); 

//phpclamav clamscan for scanning viruses 
//passthru('clamscan -d /var/lib/clamav --no-summary '.$upload_dir.$filename, $virus_msg); //scan virus 
$virus_msg = 'OK'; //assume clamav returing OK. 
if ($virus_msg != 'OK') { 
unlink($upload_dir.$filename); 
$result_msg = $filename." : ".FILE_VIRUS_AFFECTED; 
$result_msg = '<font color=red>'.$result_msg.'</font>'; 
$filename = ''; 
}else { 
// main action -- move uploaded file to $upload_dir 
$result = 'OK'; 
} 
}else { 
$filesize = filesize($_FILES['picture']['tmp_name']);// or $_FILES['picture']['size'] 
$filetype = $_FILES['picture']['type']; 
$result_msg = PICTURE_SIZE; 
} 
}else { 
$result_msg = SELECT_IMAGE; 
} 
} 
elseif ($_FILES['picture']['error'] == UPLOAD_ERR_INI_SIZE) 
$result_msg = 'The uploaded file exceeds the upload_max_filesize directive in php.ini'; 
else 
$result_msg = 'Unknown error'; 
} 

// This is a PHP code outputing Javascript code. 
echo '<script language="JavaScript" type="text/javascript">'."\n"; 
echo 'var parDoc = window.parent.document;'; 
if ($result == 'OK') { 
echo 'parDoc.getElementById("picture_error").innerHTML = "";'; 
} 
else { 
echo "parDoc.getElementById('picture_error').innerHTML = '".$result_msg."';"; 
} 

if($filename != '') { 
echo "parDoc.getElementById('picture_preview').innerHTML = '<img src=\'$preview_url$filename\' id=\'preview_picture_tag\' heigh=\'100\' width=\'100\' name=\'preview_picture_tag\' />';"; 
} 

echo "\n".'</script>'; 
exit(); // do not go futher 

?> 

2つのフォルダ

images -- keep any loading image. 
upload -- change permission. 

が

0にすべてのこれらのファイルを入れてください

image_upload 
    images 
    upload 
    index.html 
    upload-picture.php