업로드시 이미지 미리보기

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 

?> 

두 개의 폴더

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

이

0에서 모든 파일을 넣어 확인

image_upload 
    images 
    upload 
    index.html 
    upload-picture.php