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

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

Фактически вы можете загружать изображения с помощью функции ajax в JQuery по крайней мере на поздней версии хром.

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.

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

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

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

Предполагая, что у вас есть дескриптор на стороне сервера .. вот небольшая функция и пример того, как реализовать «iframe hack» в 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 прослушиватель событий и служебные функции.
* они оба легко удаляются.