Помогите обьединить два скрипта: один загрузка на jquery
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Конструктор</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<header>
<p>Загрузка изображения на сервер</p>
</header>
<div class="content">
<center><a href="gallery.php" class="nav">Перейти в
галерею</a></center>
<!-- Область для перетаскивания -->
<div id="drop-files" ondragover="return false">
<p>Перетащите изображение сюда</p>
<form id="frm">
<input type="file" id="uploadbtn" name="fileAttach[]" multiple />
</form>
</div>
<!-- Область предварительного просмотра -->
<div id="uploaded-holder">
<div id="dropped-files">
<!-- Кнопки загрузить и удалить, а также количество файлов -->
<div id="upload-button">
<center>
<span>0 Файлов</span>
<a href="#"
class="upload">Загрузить</a>
<a href="#" class="delete">Удалить</a>
<!-- Прогресс бар загрузки -->
<div id="loading">
<div id="loading-bar">
<div class="loading-
color"></div>
</div>
<div id="loading-
content"></div>
</div>
</center>
</div>
</div>
</div>
<!-- Список загруженных файлов -->
<div id="file-name-holder">
<ul id="uploaded-files">
<h1>Загруженные файлы</h1>
</ul>
</div>
</div>
</body>
</html>
var $ = jQuery.noConflict();
$(document).ready(function() {
// В dataTransfer помещаются изображения которые перетащили в область
div
jQuery.event.props.push('dataTransfer');
// Максимальное количество загружаемых изображений за одни раз
var maxFiles = 2;
// Оповещение по умолчанию
var errMessage = 0;
// Кнопка выбора файлов
var defaultUploadBtn = $('#uploadbtn');
// Массив для всех изображений
var dataArray = [];
// Область информер о загруженных изображениях - скрыта
$('#uploaded-files').hide();
// Метод при падении файла в зону загрузки
$('#drop-files').on('drop', function(e) {
// Передаем в files все полученные изображения
var files = e.dataTransfer.files;
// Проверяем на максимальное количество файлов
if (files.length <= maxFiles) {
// Передаем массив с файлами в функцию загрузки на
предпросмотр
loadInView(files);
} else {
alert('Вы не можете загружать больше '+maxFiles+'
изображений!');
files.length = 0; return;
}
});
// При нажатии на кнопку выбора файлов
defaultUploadBtn.on('change', function() {
// Заполняем массив выбранными изображениями
var files = $(this)[0].files;
// Проверяем на максимальное количество файлов
if (files.length <= maxFiles) {
// Передаем массив с файлами в функцию загрузки на
предпросмотр
loadInView(files);
// Очищаем инпут файл путем сброса формы
$('#frm').each(function(){
this.reset();
});
} else {
alert('Вы не можете загружать больше '+maxFiles+'
изображений!');
files.length = 0;
}
});
// Функция загрузки изображений на предросмотр
function loadInView(files) {
// Показываем обасть предпросмотра
$('#uploaded-holder').show();
// Для каждого файла
$.each(files, function(index, file) {
// Несколько оповещений при попытке загрузить не
изображение
if (!files[index].type.match('image.*')) {
if(errMessage == 0) {
$('#drop-files p').html('Эй! только
изображения!');
++errMessage
}
else if(errMessage == 1) {
$('#drop-files p').html('Стоп!
Загружаются только изображения!');
++errMessage
}
else if(errMessage == 2) {
$('#drop-files p').html("Не умеешь
читать? Только изображения!");
++errMessage
}
else if(errMessage == 3) {
$('#drop-files p').html("Хорошо!
Продолжай в том же духе");
errMessage = 0;
}
return false;
}
// Проверяем количество загружаемых элементов
if((dataArray.length+files.length) <= maxFiles) {
// показываем область с кнопками
$('#upload-button').css({'display' : 'block'});
}
else { alert('Вы не можете загружать больше
'+maxFiles+' изображений!'); return; }
// Создаем новый экземпляра FileReader
var fileReader = new FileReader();
// Инициируем функцию FileReader
fileReader.onload = (function(file) {
return function(e) {
// Помещаем URI изображения в
массив
dataArray.push({name :
file.name, value : this.result});
addImage((dataArray.length-1));
};
})(files[index]);
// Производим чтение картинки по URI
fileReader.readAsDataURL(file);
});
return false;
}
// Процедура добавления эскизов на страницу
function addImage(ind) {
// Если индекс отрицательный значит выводим весь массив
изображений
if (ind < 0 ) {
start = 0; end = dataArray.length;
} else {
// иначе только определенное изображение
start = ind; end = ind+1; }
// Оповещения о загруженных файлах
if(dataArray.length == 0) {
// Если пустой массив скрываем кнопки и всю область
$('#upload-button').hide();
$('#uploaded-holder').hide();
} else if (dataArray.length == 1) {
$('#upload-button span').html("Был выбран 1 файл");
} else {
$('#upload-button span').html(dataArray.length+" файлов
были выбраны");
}
// Цикл для каждого элемента массива
for (i = start; i < end; i++) {
// размещаем загруженные изображения
if($('#dropped-files > .image').length <= maxFiles) {
$('#dropped-files').append('<div id="img-'+i+'"
class="image" style="background: url('+dataArray[i].value+'); background-size:
cover;"> <a href="#" id="drop-'+i+'" class="drop-button">Удалить
изображение</a></div>');
}
}
return false;
}
// Функция удаления всех изображений
function restartFiles() {
// Установим бар загрузки в значение по умолчанию
$('#loading-bar .loading-color').css({'width' : '0%'});
$('#loading').css({'display' : 'none'});
$('#loading-content').html(' ');
// Удаляем все изображения на странице и скрываем кнопки
$('#upload-button').hide();
$('#dropped-files > .image').remove();
$('#uploaded-holder').hide();
// Очищаем массив
dataArray.length = 0;
return false;
}
// Удаление только выбранного изображения
$("#dropped-files").on("click","a[id^='drop']", function() {
// получаем название id
var elid = $(this).attr('id');
// создаем массив для разделенных строк
var temp = new Array();
// делим строку id на 2 части
temp = elid.split('-');
// получаем значение после тире тоесть индекс изображения в
массиве
dataArray.splice(temp[1],1);
// Удаляем старые эскизы
$('#dropped-files > .image').remove();
// Обновляем эскизи в соответсвии с обновленным массивом
addImage(-1);
});
// Удалить все изображения кнопка
$('#dropped-files #upload-button .delete').click(restartFiles);
// Загрузка изображений на сервер
$('#upload-button .upload').click(function() {
// Показываем прогресс бар
$("#loading").show();
// переменные для работы прогресс бара
var totalPercent = 100 / dataArray.length;
var x = 0;
$('#loading-content').html('Загружен '+dataArray[0].name);
// Для каждого файла
$.each(dataArray, function(index, file) {
// загружаем страницу и передаем значения, используя
HTTP POST запрос
$.post('upload.php', dataArray[index], function(data) {
var fileName = dataArray[index].name;
++x;
// Изменение бара загрузки
$('#loading-bar .loading-color').css({'width' :
totalPercent*(x)+'%'});
// Если загрузка закончилась
if(totalPercent*(x) == 100) {
// Загрузка завершена
$('#loading-content').html('Загрузка
завершена!');
// Вызываем функцию удаления всех
изображений после задержки 1 секунда
setTimeout(restartFiles, 1000);
// если еще продолжается загрузка
} else if(totalPercent*(x) < 100) {
// Какой файл загружается
$('#loading-content').html('Загружается
'+fileName);
}
// Формируем в виде списка все загруженные
изображения
// data формируется в upload.php
var dataSplit = data.split(':');
if(dataSplit[1] == 'загружен успешно') {
$('#uploaded-files').append('<li><a
href="images/'+dataSplit[0]+'">'+fileName+'</a> загружен успешно</li>');
} else {
$('#uploaded-files').append('<li><a
href="images/'+data+'. Имя файла: '+dataArray[index].name+'</li>');
}
});
});
// Показываем список загруженных файлов
$('#uploaded-files').show();
return false;
});
// Простые стили для области перетаскивания
$('#drop-files').on('dragenter', function() {
$(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0,
0.1)', 'border' : '4px dashed #bb2b2b'});
return false;
});
$('#drop-files').on('drop', function() {
$(this).css({'box-shadow' : 'none', 'border' : '4px dashed
rgba(0,0,0,0.2)'});
return false;
});
});
Другой canvas-изменяет размер изображения:
|
Код:
|
в следующем сообщении |
Смысл в том, чтобы при предпросмотре изображение не обрезалось, а изменяло размер на меньший заданый во втором скрипте. Загружаться на сервер должен оригинал.
