0

Как сделать моментальный вывод при загрузке фото, чтобы показывалось фото, которое человек загрузил, короче, пример, когда изменяете аватарку Вконтакте.

2
  • и как .load() покажет картинку? запрашивать отдельно блок с картинкой ? не проще src у превью поменять ?
    – zb'
    28 авг 2014 в 1:16

1 ответ 1

3

Не знаю, как там Вконтакте сделано, но надеюсь, что вашу задачу понял правильно. В примере, я не стал углубляться и сделал схематически. В реале, вам надо будет обрабатывать данные, экранировать, проверять расширение загружаемых файлов и прочие опасности.

Создайте три файла и поместите в один каталог:

  • index.php (или index.html)
  • handler.php
  • script.js
  • и папку "avatars"

index.php (подключаете в него библиотеку jQuery и script.js). В <body> пишем:

<iframe name="tFrame" style="display:none;"></iframe>
<form action="handler.php" method="post" enctype="multipart/form-data" target="tFrame">
    <input type="file" id="user_avatar" name="user_avatar" />
    <input type="hidden" name="user_id" value="100500" />
</form>
<div id="avatar">
    <img src="./avatars/no_avatar.png" style="max-width: 256px;
 max-height: 256px;" alt="" />
</div>

handler.php

<?php

if(isset($_POST['user_id'])){
    $success = false;
    if($_FILES['user_avatar']['error'] == 0){
        $uid = (int)$_POST['user_id'];
        $ext = explode('.',$_FILES['user_avatar']['name']);
        $file_name = 'avatar_'.$uid.'.'.$ext[1]; // новое имя файла
        $path_orig = './avatars/original/'.$file_name; // путь к оригиналу
        $path_thumg = './avatars/thumbs/'.$file_name; // путь к миниатюре
        if(move_uploaded_file($_FILES['user_avatar']['tmp_name'],$path_orig)){
            require('image.class.php');
            // true - сохранять пропорции, false - не сохранять  
            $image = new Imagethumb($path_orig, true);
            // 250, 250 - размеры миниатюры
            // При сохранении пропорций - как max-width, max-height
            $image->getThumb($path_thumg, 250, 250); 
            $success = true;
        }
    }
    echo '<script type="text/javascript">window.parent.onResponse('.$success.',"'.$path_thumg.'");</script>';
}
?>

script.js

$(document).ready(function(e) {
    $('#user_avatar').change(function(){
        $(this).parent('form').submit();
    });
});
function onResponse(s,f){
    if(s){
        $('#avatar img').animate({
            opacity: 0
        }, function(){
            $(this).attr('src',f + '?' + Math.floor(Math.random( ) * (100+1)))
            .animate({
                opacity: 1
            });
        });
    } else {
        alert('Пичалька! Аватарчик умер в дороге.');
    }
}

Чаво будет не понятно - спрашивайте.

UPD По поводу изменения размеров - в инете тысячи готовых решений. Найти было бы не сложно. В общем, поместите файл с классом в тот же каталог. В папке avatars создаёте две директории original и thumbs. Я обновил код файла handler.php, не забудьте это сделать и вы.

P.S. Посмотреть, как работает это чудо враждебной техники, можно >> тут <<

1
  • Дополнил в ответе
    – Deonis
    14 авг 2012 в 2:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.