загрузка изображений с помощью ajax и php

Я хочу использовать AJAX для загрузки изображения. В этом модуле:

  1. При нажатии browseи выборе изображения оно будет загружено и отображено над полем файла.
  2. После добавления заголовка и описания и нажатия на кнопку, это изображение будет отображаться ниже, а верхнее поле изображения будет пустым
13.10.2009 08:14:12
Не могли бы вы опубликовать свой текущий HTML / Javascript
Neil Aitken 13.10.2009 08:16:03
Что вы пробовали, что не сработало и где неисправный код? Мне ужасно жаль, что мне пришлось спросить, но я, кажется, неправильно
Duroth 13.10.2009 08:58:08
4 ОТВЕТА

Вы не можете загружать файлы через AJAX. Вам нужно работать с IFRAME или Flash-загрузчиком.

3
13.10.2009 09:01:24
Я бы предпочел использовать iframe, так как мы не созданы для работы с flash.
mauris 13.10.2009 09:08:33
... которые Аякс. Аякс не XHR. XHR - это самый распространенный способ реализации Ajax.
Quentin 13.10.2009 09:13:07
Firefox> = 3 и Chrome> = 2 поддерживают загрузку XHR.
Ionuț G. Stan 13.10.2009 09:33:24

Попробуйте использовать плагин JQuery для загрузки изображения.

Может быть http://www.uploadify.com/

Это даст представление о том, как это сделать.

1
13.10.2009 09:23:58
@piemesons Он работает на моей системе с использованием IE 8. Пожалуйста, убедитесь, что у вас установлен Flash Player.
Bindas 30.11.2010 07:34:15

Предполагая, что у вас есть дескриптор на стороне сервера ... вот небольшая функция и пример того, как реализовать «взлом iframe» в javascript.

HTML

<form name="image-upload">
<input type="file" name="image" /></br>
<button type="submit" name="upload">Upload</button>
<div id="upload-results"></div>
</form>

Javascript

var fileUpload = function(form /* HTMLElement */, action /* Form Action URL */, callback /* Callback function */) {
    /* vars */
    var atribs = {
        "target": "upload_iframe",
        "action": action,
        "method": "post",
        "enctype": "multipart/form-data",
        "encoding": "multipart/form-data"
    }, iframe;
    /* iframe listener */
    var ilistener = function() {
        var results;
        listener.remove(this, 'load', ilistener);
        if( 'contentDocument' in this ) {
            results = this.contentDocument.body.innerHTML;
        } else if ( 'contentWindow' in this ) {
            results = this.contentWindow.document.body.innerHTML;
        } else if ( 'document' in this ) {
            results = this.document.body.innerHTML;
        } else {
            throw "i'm dead jim :/";
        }
        callback.apply(this,[results]); // call the callback, passing the results
        this.parentNode.removeChild(this); // remove the iframe
    };

    /* create the iframe */
    form.parentNode.appendChild(FragBuilder([{"tagName": "iframe","id": "upload_iframe","name": "upload_iframe","style": {"height": "0","width": "0","border": "0"}}]));
    /* collect the iframe back */
    iframe = By.id('upload_iframe');
    /* set the form properties */
    for( var attr in atribs ) {
        if( attr in form ) {
            form[attr] = atribs[attr];
        }
    }
    /* attach the event listener to the iframe */
    listener.add(iframe, 'load', ilistener);
    /* submitting the form */
    form.submit();
};

// get the form, and the results area
var form = document.forms['image-upload'], results = By.id('upload-results');
// listen for the form submit, capture it, and run the iframe upload.
listener.add(form, 'submit', function(e) {
    e.preventDefault();
    results.innerHTML = 'Uploading...';
    fileUpload(this, 'server.php' /* really anything */, function(data) { 
        console.log(data);
            results.innerHTML = "Uploaded!";
    });
});

Обратите внимание: для простоты я использовал следующие утилиты. https://github.com/rlemon/FragBuilder.js Конструктор DocumentFragment из входных данных JSON.
https://gist.github.com/2172100 слушатель событий, а также с помощью служебных функций.
* они оба легко удаляются.

1
4.04.2012 20:31:45
Я понимаю, что прошло три года, но я наткнулся на это во время поиска. Так что я думаю, что другие тоже могут. Вот вы 2012 ответ
rlemon 4.04.2012 22:22:07
Я получаю сообщение об ошибке "ReferenceError: By не определено" "var form = document.forms ['image-upload'], results = By.id ('upload-results');"
Goldie 20.11.2012 19:31:59
Служебные функции также должны быть включены. см. примечания под кодом. или измените By.id на document.getElementById
rlemon 20.11.2012 22:50:34

На самом деле вы можете загружать изображения с помощью функции ajax в Jquery по крайней мере в последней версии Chrome.

HTML:

<form action="/" enctype="multipart/form-data" method="post" accept-charset="utf-8">
     <input type="file" name="image"/>
     <button type="submit">
</form>

JS:

$("form").submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
       url: window.location.pathname,
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       processData: false,
       success: function (data) {
              alert(data);
       }
    }); 
    return false;
}); 

Этот скрипт отправит запрос на публикацию с данными созданного файла на текущую страницу через Ajax. Очевидно, вы можете изменить пункт назначения, изменив параметр url.

2
16.05.2013 08:08:31
Почему вы оборачиваете элемент формы в jquery, только чтобы прочитать его снова? $(this)[0]===this
Dogoku 7.03.2014 17:27:59