ФорумПрограммированиеJavaScript → Ajax загрузка файлов

Ajax загрузка файлов

  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 4:55

    Хочу написать функцию загрузки картинки на сервер, да так, что бы она сразу появлялась перед юзером(без перезагрузки страницы)

    1. Вообще возможно ли такое.
    2. Возможно ли на JQuery
    3. Какие советы дадите?
  • Trej Gun

    Сообщения: 5299 Репутация: N Группа: в ухо

    Spritz 5 января 2009 г. 4:57, спустя 2 минуты 16 секунд

    возможно, возможно на жуквери, попробуй - не выйдет я помогу
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 5 января 2009 г. 5:41, спустя 43 минуты 55 секунд


    Хочу написать функцию загрузки картинки на сервер, да так, что бы она сразу появлялась перед юзером(без перезагрузки страницы)

    1. Вообще возможно ли такое.
    2. Возможно ли на JQuery
    3. Какие советы дадите?
    $("#container").append("<img src='"+filefield.value+"' />");

    можно даже не загружать))))

    показываешь ему картинку с его же компа))

    src="file://c:\…." …

    и в это время грузишь на сервер в ифрейме картинку
    Сапожник без сапог
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 5:58, спустя 17 минут 32 секунды

    Не, а если он не дождется загрузки и закроет страницу?То картинка не загрузится.

    <script>
    $(document).ready(function(){

    var allowed = ['jpg', 'png', 'gif', 'jpeg'];

    $.ajax_upload('#button2', {
    action: '/ajax.php',
    data : {
    'action' : "file_upload",
    'key1' : "This string won't be send because we will overwrite it"
    },
    onSubmit : function(file , ext){
    if ($.inArray(ext, allowed ) === -1){
    // extension is not allowed
    $('#example2 .text').text('Error: only images are allowed');
    // cancel upload
    return false;
    }
    /* Setting data */
    this.set_data({
    'key': 'This string will be send with the file'
    });

    $('#example2 .text').text('Uploading ' + file);
    },
    onSuccess : function(file){
    $('#example2 .text').text('Uploaded ' + file);
    }
    });

    });
    </script>

    <ul>
    <li id="example2" class="example">
    <a id="button2">Загрузка картинки</a>
    <p class="text"></p>
    </li>
    </ul>

    Вот что нарыл, но почему то Ajax запрос не хочет выполняться =(
    Единственное предположение это не правильно подключенная библиотека
  • Trej Gun

    Сообщения: 5299 Репутация: N Группа: в ухо

    Spritz 5 января 2009 г. 6:14, спустя 15 минут 27 секунд

    я в примере не вижу кнопки
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 6:18, спустя 3 минуты 47 секунд

    <a id="button2">Загрузка картинки</a>

    Выполняет роль кнопки
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 6:22, спустя 4 минуты 5 секунд

    К стати пример взят отсюда.
    http://valums.com/projects/ajax-upload/
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 13:54, спустя 7 часов 32 минуты 16 секунд

    Мля!!!
    Поменял формат данных dataType: 'json',
    на dataType: 'xml', и все заработало!!!
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 5 января 2009 г. 13:55, спустя 1 минуту 32 секунды

    jjoshh
    Сапожник без сапог
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 14:03, спустя 7 минут 42 секунды

    Единственный вопрос, как теперь в месте с файлом пост переменную передать?
    data: "action=file_upload",
  • adw0rd

    Сообщения: 22905 Репутация: N Группа: в ухо

    Spritz 5 января 2009 г. 14:15, спустя 11 минут 31 секунду

    Professor, http://anton.shevchuk.name/javascript/jquery-for-beginners-ajax/ почитай, полезно будет думаю :-)
    adw/0
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 14:19, спустя 3 минуты 51 секунду

    Ты даже не представляешь сколько раз я это перечитывал =(
    Ну вот, скрипт опять не работает!!
    Да что ему надо???? Б****** *а *а* ** ******* * * * * * *
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 14:25, спустя 6 минут 19 секунд

    Просто

    Параметры метода метод $.ajaxFileUpload
    url – адрес скрипта обработчика
    fileElementId - input-элемент типа file, который используется для загрузки файла
    dataType – формат данных, например 'json'
    success – функция, которая будет вызвана при успешной передаче данных
    error – функция, которая будет вызвана при ошибке

    А вот дополнительные параметры скрипту передать не знаю как=(
  • phpdude

    Сообщения: 26624 Репутация: N Группа: в ухо

    Spritz 5 января 2009 г. 14:32, спустя 7 минут 10 секунд


    Просто

    Параметры метода метод $.ajaxFileUpload
    url – адрес скрипта обработчика
    fileElementId - input-элемент типа file, который используется для загрузки файла
    dataType – формат данных, например 'json'
    success – функция, которая будет вызвана при успешной передаче данных
    error – функция, которая будет вызвана при ошибке

    А вот дополнительные параметры скрипту передать не знаю как=(
    допиши сам этот функционал …
    Сапожник без сапог
  • Professor

    Сообщения: 2089 Репутация: N Группа: Адекваты

    Spritz 5 января 2009 г. 14:52, спустя 19 минут 58 секунд

    Ну это ты у нас крутой програмист, А я только учусь+) не забывай=)

    Из кода я понял, что там создается bahtqv и в нем форма которая и запускает закачку файла.



    Теперь помогаем мне разобраться во всей этой хрени и дописать функционал!=)

    createUploadForm: function(id, fileElementId)
    {
    //create form
    var formId = 'jUploadForm' + id;
    var fileId = 'jUploadFile' + id;
    var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
    var oldElement = jQuery('#' + fileElementId);
    var newElement = jQuery(oldElement).clone();
    jQuery(oldElement).attr('id', fileId);
    jQuery(oldElement).before(newElement);
    jQuery(oldElement).appendTo(form);
    //set attributes
    jQuery(form).css('position', 'absolute');
    jQuery(form).css('top', '-1200px');
    jQuery(form).css('left', '-1200px');
    jQuery(form).appendTo('body');
    return form;
    },

    Вот процесс создания формы.
    Я хочу добавить в форму hidden с нужным параметром.
    Ход мыслей правильный, или нужно подругому?

Пожалуйста, авторизуйтесь, чтобы написать комментарий!