VPF::загрузка изображения без перезагрузки страницы

linuxoid

Дата 21.1.2010, 14:47 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 180
Регистрация: 17.4.2005

Репутация: нет
Всего: нет

Здравствуйте коллеги! Пытаюсь решить такую задачу:

Есть форма (к примеру имя, адрес, телефон, фото 1, фото 2, фото 3 и т.д., биография). Нужно, чтобы картинки добавлялись на лету, но форма при этом не отправлялась. К примеру, если пользователь не ввел телефон, то сверху в том же окне появится ошибка "введите телефон" и т.д. Но ошибки не должно быть, если я сразу начал с добавления фоток. Для этого мне и нужно как-то "отвести" закачку фоток от общей формы. Все это нужно для того, чтобы человек сразу увидел, как добавилась фотка, получил сообщение об ошибке, если что-то не так (размер, формат, возможность сразу удалить фото и т.д.). Я на эту тему нашел варианты реализации того, что мне нужно, но... везде примеры, где только 1 поле для добавления фотки и никаких текстфилдов и других полей. В этом и заключается проблема + должно работать во всех браузерах.

Вот пример того, что бы подошло, за исключением того, что ошибки выводятся не яваскриптом, а на самой странице.

http://www.doska.ru/entertainment/acquaintances/new-step-2/

Вспомогательный материал:

"Ajax" image upload
http://www.atwebresults.com/php_ajax_image_upload/
http://www.webmotionuk.co.uk/jquery-image-...d-crop-for-php/
http://wizecho.com/nav=scripts&s=ajax_image
http://www.articlesbase.com/programming-ar...jax-458806.html

Форма в форме -
http://phoinix.ucoz.ru/publ/4-1-0-17
http://markuzweb.blogspot.com/2009/10/embe...in-another.html
http://codingforums.com/showthread.php?p=817890

Буду благодарен за любую информацию.

bars80080

Дата 21.1.2010, 15:14 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 71
Всего: 315

Цитата(linuxoid @ 21.1.2010, 13:47

)

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

в данном случае не обязательно. отправили форму, файл сохранился, в скрипте проверились остальные поля, если что-то не так, где-нибудь (в сессии или форме) сохраняем идентификатор загруженного файла, а форму возвращаем для корректировки данных. с пометкой, что файл такой-то уже добавлен

linuxoid

Дата 21.1.2010, 15:24 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 180
Регистрация: 17.4.2005

Репутация: нет
Всего: нет

В том то и дело, что я "не хочу", чтобы форма что-то проверяла, когда я добавил фото. Проверка должна происходить только тогда, когда пользователь нажал кнопку "Submit". В тех примерах, что я указал выше идет отправка формы целиком (т.е. submit выполняется сразу после выбора фотографии через "browse"), поэтому и происходит проверка на ошибки даже в том случае, если пользователь еще не добрался до телефона или биографии. Поэтому мне и нужно, чтобы фотки добавлялись как бы отдельно от формы (ведь я могу записать их в базу, а потом уже при субмите формы делать с ними все, что нужно.. по идее)

Это сообщение отредактировал(а) linuxoid - 21.1.2010, 15:32

bars80080

Дата 21.1.2010, 16:08 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 71
Всего: 315

Цитата(linuxoid @ 21.1.2010, 14:24

)

В тех примерах, что я указал выше идет отправка формы целиком (т.е. submit выполняется сразу после выбора фотографии через "browse")

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

linuxoid

Дата 21.1.2010, 16:28 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 180
Регистрация: 17.4.2005

Репутация: нет
Всего: нет

В том-то вся и проблема, что это нежелательный эффект оп использования такой системы загрузки фоток (по типу AJAX'a). Без сабмита всей формы, в которой находятся картинки загрузить их "на лету" нельзя. Но кажется я нашел решение.

Если кому-то интересно, то можете скачать приложенный архив и заменить там index.php на этот код, потом запустить на локалке. В таком варианте корректно работает и загрузка фоток "на лету" и сама форма сабмитится как положено.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>PHP AJAX Image Upload, Truly Web 2.0!</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
        <!-- MAKE SURE TO REFERENCE THIS FILE! -->
        <script type="text/javascript" src="scripts/ajaxupload.js"></script>
        <script language="JavaScript">
          function SIF () {
            document.InternalForm.input1.value = document.form_1.input1.value;
            document.InternalForm.input2.value = document.form_1.input2.value;
            document.InternalForm.input4.value = document.form_2.input4.value;
            document.InternalForm.input5.value = document.form_2.input5.value;
            document.InternalForm.submit();
          }
        </script>        
        <!-- END REQUIRED JS FILES -->
        <!-- THIS CSS MAKES THE IFRAME NOT JUMP -->
        <style type="text/css">
            iframe {
                display:none;
            }
        </style>
        <!-- THIS CSS MAKES THE IFRAME NOT JUMP -->
    </head>
    <?
        print_r($_POST);
    ?>
    <body>
        <div id="container">
            <!-- THIS IS THE IMPORTANT STUFF! -->
            <div id="demo_area">
                <div id="left_col">
                    <!-- 
                        VERY IMPORTANT! Update the form elements below ajaxUpload fields:
                        1. form - the form to submit or the ID of a form (ex. this.form or standard_use)
                        2. url_action - url to submit the form. like 'action' parameter of forms.
                        3. id_element - element that will receive return of upload.
                        4. html_show_loading - Text (or image) that will be show while loading
                        5. html_error_http - Text (or image) that will be show if HTTP error.

                        VARIABLE PASSED BY THE FORM:
                        maximum allowed file size in bytes:
                        maxSize        = 9999999999
                        
                        maximum image width in pixels:
                        maxW            = 200
                        
                        maximum image height in pixels:
                        maxH            = 300
                        
                        the full path to the image upload folder:
                        fullPath        = http://www.atwebresults.com/php_ajax_image_upload/uploads/
                        
                        the relative path from scripts/ajaxupload.php -> uploads/ folder
                        relPath        = ../uploads/
                        
                        The next 3 are for cunstom matte color of transparent images (gif,png), use RGB value
                        colorR        = 255
                        colorG        = 255
                        colorB        = 255

                        The form name of the file upload script
                        filename        = filename
                    -->
                    <fieldset>
                        <legend>Sleeker More "Web 2.0" onChange Use</legend>
                      <form action="" method="post" name="form_1">
                        text1:<input type="text" name="input1"><br>
                        text2:<input type="text" name="input2"><br>
                      </form>                        
                        <form action="scripts/ajaxupload.php" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data">
                            <input type="hidden" name="maxSize" value="9999999999" />
                            <input type="hidden" name="maxW" value="200" />
                            <input type="hidden" name="fullPath" value="uploads/" />
                            <input type="hidden" name="relPath" value="../uploads/" />
                            <input type="hidden" name="colorR" value="255" />
                            <input type="hidden" name="colorG" value="255" />
                            <input type="hidden" name="colorB" value="255" />
                            <input type="hidden" name="maxH" value="300" />
                            <input type="hidden" name="filename" value="filename" />
                            <p><input type="file" name="filename" onchange="ajaxUpload(this.form,'scripts/ajaxupload.php?filename=name&amp;maxSize=9999999999&amp;maxW=200&amp;fullPath=uploads/&amp;relPath=../uploads/&amp;colorR=255&amp;colorG=255&amp;colorB=255&amp;maxH=300','upload_area','File Uploading Please Wait...&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; Error in Upload, check settings and path info in source code.'); return false;" /></p>
                        </form>
                      <form method="post" name="form_2">
                        text4:<input type="text" name="input4"><br>
                        text5:<input type="text" name="input5"><br>    
                              <input type="button" name="input6" value="Submit" onClick="javascript:SIF();"><br>
                      </form>         
                    <form action="" method="post" name="InternalForm">
                      <input type="hidden" name="input1">
                      <input type="hidden" name="input2">
                      <input type="hidden" name="input4">
                      <input type="hidden" name="input5">
                    </form>                                     
                    </fieldset>
                    <br /><small style="font-weight: bold; font-style:italic;">Supported File Types: gif, jpg, png</small>
                </div>
                <div id="right_col">
                    <div id="upload_area">
                        Images Will Be uploaded here for the demo.<br /><br />
                        You can direct them to do any thing you want!
                    </div>
                </div>
                <div class="clear"> </div>
            </div>
            <!-- END IMPORTANT STUFF -->
    </div>    
</body>
</html>

Присоединённый файл ( Кол-во скачиваний: 38 )

php_ajax_image_upload.zip 73,80 Kb

linuxoid

Дата 23.1.2010, 21:02 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 180
Регистрация: 17.4.2005

Репутация: нет
Всего: нет

Здравствуйте товарищи. В общем я сделал то, что и задумывал. Код конечно не блестящий и это только первый вариант кгб + надо "подгонять под себя", но anyway это полное и готовое к использованию решение.

- Добавление фоток без перезагрузки в рамках формы с текстовыми полями и т.д..
- Удаление фоток без перезагрузки
- Кол-во фоток (browser'ов) задается в конфиге
- Фотки не "мешают" основной форме (где идут телефоны, адреса и другие поля)
- Если пользователь допустил ошибки в основной форме, то фоки остаются на месте и их всегда можно менять.
- работает в основных браузерах

Если кого-то интересует, то все файлы в приложении. Вам нужно будет поменять код только в 2х местах.

В index.php:
define("PATH", "C:/xampp/htdocs/image_upload_2/uploads/"); - указать свой путь

В ajaxdelete.php
unlink("C:/xampp/htdocs/image_upload_2/".$filepath); - указать свой путь

Было бы интересно узнать ваши комментарии, если будете смотреть... thx

Присоединённый файл ( Кол-во скачиваний: 75 )

ajax_image_upload_v2.rar 214,86 Kb

maksnk

Дата 3.7.2014, 09:15 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 3.7.2014

Репутация: нет
Всего: нет

Цитата(linuxoid @ 23.1.2010, 21:02)

У меня не работает. Выдает вот что

Array ( )

Error: text 1 dolzen bitj raven 1000! (primer otslezivanija owibok pri tom, cto zagruzennie fotki nikuda ne iscezajut)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| PHP: Общие вопросы \| Следующая тема »