var form_data = $(this).serialize();
console.log(form_data);
<div></div>
, слушатель уже существует -> всё работает <div class="image-preview">
<img id="preview" src="" alt="">
</div>
<form id="upload-image" enctype="multipart/form-data">
<div class="form-group">
<label for="image">Image file:</label>
<input type="file" name="image" id="image">
</div>
<input type="submit" class="btn btn-default">
</form>
<div id="result">
</div>
$(document).ready(function () {
function readImage ( input ) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
function printMessage(destination, msg) {
$(destination).removeClass();
if (msg == 'success') {
$(destination).addClass('alert alert-success').text('Файл успешно загружен.');
}
if (msg == 'error') {
$(destination).addClass('alert alert-danger').text('Произошла ошибка при загрузке файла.');
}
}
$('#image').change(function(){
readImage(this);
});
$('#upload-image').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST', // Тип запроса
url: 'handler.php', // Скрипт обработчика
data: formData, // Данные которые мы передаем
cache:false, // В запросах POST отключено по умолчанию, но перестрахуемся
contentType: false, // Тип кодирования данных мы задали в форме, это отключим
processData: false, // Отключаем, так как передаем файл
success:function(data){
printMessage('#result', data);
},
error:function(data){
console.log(data);
}
});
}));
});
if(isset($_FILES) && isset($_FILES['image'])) {
//Переданный массив сохраняем в переменной
$image = $_FILES['image'];
// Проверяем размер файла и если он превышает заданный размер
// завершаем выполнение скрипта и выводим ошибку
if ($image['size'] > 200000) {
die('error');
}
// Достаем формат изображения
$imageFormat = explode('.', $image['name']);
$imageFormat = $imageFormat[1];
// Генерируем новое имя для изображения. Можно сохранить и со старым
// но это не рекомендуется делать
$imageFullName = './images/' . hash('crc32',time()) . '.' . $imageFormat;
// Сохраняем тип изображения в переменную
$imageType = $image['type'];
// Сверяем доступные форматы изображений, если изображение соответствует,
// копируем изображение в папку images
if ($imageType == 'image/jpeg' || $imageType == 'image/png') {
if (move_uploaded_file($image['tmp_name'],$imageFullName)) {
echo 'success';
} else {
echo 'error';
}
}
}