Ajax загрузка изображений с предпросмотром
Наконец, на gusevcore.ru появилась возможность размещать изображения в блоге. Для этого написал небольшую штуку для загрузки картинок с предпросмотром.
План следующий:
1. Размещаем, но скрываем обычный input.
2. При клике на нашу кнопку, которую мы можем украсить, через JS кликаем на input.
3. Открывается диалог выбора файла.
4. После выбора файла по событию onchange выводим файл в base64 в img.
5. При клике на другую кнопку загрузить, отправляем файл ajax запросом.
6. Сохраняем.

<input id="file" type="file" accept="image/jpeg,image/png" onchange="Imgs.select(this);" style="display: none;" />

<button onclick="Imgs.open();">Выбрать</button>
<button onclick="Imgs.load();">Загрузить</button>

<img id="preview" />
Благодаря атрибута accept у тега input в окне выбора файла будут отображаться файлы с заданным форматам. В нашем случае изображения формата: png, jpg.

var Imgs = {
     // При нажатии на кнопку выбрать
     open: function() {
          // Кликним по input, для открытия окна выбора
          document.getElementById('file').click();
     },

     // Вызовется при выбора файла по событию onchange у input
     select: function(button) {
          var 
               fileReader = new FileReader(), // Объект для чтения локальных файлов
               preview = document.getElementById('preview'); // Тег img для предпросмотра

          // После завершения локальной загрузке
          fileReader.onloadend = function() {
               // Поместим в img результат загрузки в base64
               preview.src = fileReader.result;
          };

          // Загрузим файл локально
          fileReader.readAsDataURL(button.files[0]);
     },

     // При нажатии на кнопку загрузить
     load: function() {
          var 
               formData = new FormData(), // Объект формы для отправки на сервер
               file = document.getElementById('file').files[0],  // Выбранный файл
               xhr = new XMLHttpRequest();  // Объект для обмена данными с сервером

          // Добавим наш файл в FormData
          formData.append(file.name, file);

          // Откроем канал
          xhr.open('POST', 'load.php', true);
          // Событие по завершению загрузки
          xhr.onload = function() { 
               console.log('Загружено!');
          };
          // Отправим файл на сервер
          xhr.send(formData); 
     }
}

Осталось сохранить
// Переберем все пришедшие файлы
foreach($_FILES as $file) {
     // Выполним перемещение из временного хранилища в нужное место
     if (move_uploaded_file($file['tmp_name'], 'images/' . $file['name'])) {
          echo 'Загружено: ' . $file['name'] . '<br>';
     }
}

Получилось кода больше текста, для этого на днях сделаю возможность прикреплять демо, что бы не переписывать весь код, а только интересные моменты.