Как я могу загрузить изображения с помощью ajax / jQuery и PHP без обновления страницы?

Question

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

Answer 1

Используйте функцию $ post или $ ajax, чтобы получить изображение из файла и обновить div, содержащий изображение.

$.post('file_of_image', function(data) {
  $('#image_containing_div').html(data);
});

В файле, содержащем файл, напишите echo "" и другие необходимые параметры в кавычках php.

Answer 2

Одна из опций, которую я использовал в прошлом: Ajax Upload от Andrew Valums.

Answer 3

Я думаю, что вам нужно что-то без вспышки. Чтобы заставить его работать с javascript, вам нужно решение с iframes. (из-за ограничений доступа к JavaScript) Это одно хорошее решение с jquery: http://valums.com/ajax-upload/ Вы можете найти еще немного, если вы Google что-то вроде "jquery iframe file upload"

Answer 4

Вы можете использовать Uploadify

Как указывало @Groovetrain, это основано на флэш-памяти, и вы можете рассмотреть что-то, используя вместо этого iframe.Но если прошивка не проблема, вот код для отображения изображения при загрузке:

Разметка

<input type="file" id="file_upload" name="file_upload" />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
<div id="preview"></div>

JS

$('#file_upload').uploadify({
  'uploader'    : '/uploadify/uploadify.swf',
  'script'      : '/uploadify/uploadify.php',
  'cancelImg'   : '/uploadify/cancel.png',
  'folder'      : '/uploads',
  'fileExt'     : '*.jpg;*.gif;*.png',
  'fileDesc'    : 'Image Files'
  'onComplete'  : function(event, ID, fileObj, response, data) {
      $('#preview').append('<img src="uploads/' + fileObj.name + "/>');
    }
});