1. kuller - 27 Апреля, 2016 - 05:06:29 - перейти к сообщению
разобрался!
2. kuller - 28 Апреля, 2016 - 10:36:34 - перейти к сообщению
хотя не что не разобрался
есть функция которая при выборе фото делает привю
есть функция которая при выборе фото делает привю
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- var objects = function loadingPreview()
- {
- var previewWidth = 70, // ширина превью
- previewHeight = 70, // высота превью
- count = 0, // включить максимальное кол-во загружаемых фото. 0 - нет.1 - да
- total = 5, // колько фото разрешено загружать
- maxFileSize = 11 * 1024 * 1024, // (байт) Максимальный размер файла (2мб)
- selectedFiles = {},// объект, в котором будут храниться выбранные файлы
- queue = [],
- image = new Image(),
- imgLoadHandler,
- isProcessing = false,
- errorMsg, // сообщение об ошибке при валидации файла
- previewPhotoContainer = document.querySelector('#preview-photo'); // контейнер, в котором будут отображаться превью
- // Когда пользователь выбрал файлы, обрабатываем их
- $('input[type=file][id=photo]').on('change', function() {
- var newFiles = $(this)[0].files; // массив с выбранными файлами
- for(var i = 0; i < newFiles.length; i++)
- {
- if(count == 1)
- {
- if(Object.keys(selectedFiles).length >= total)
- {
- soundError();
- $('#error').fadeIn(1000);
- $("#error").html('<div style="color: #fff; font: 17px roboto; margin-bottom: 15px; text-align: center;">Загружать можно максимом 5 фотографий</div>');
- error();
- continue;
- }
- }
- var file = newFiles[i];
- // В качестве "ключей" в объекте selectedFiles используем названия файлов
- // чтобы пользователь не мог добавлять один и тот же файл
- // Если файл с текущим названием уже существует в массиве, переходим к следующему файлу
- if(selectedFiles[file.name] != undefined) continue;
- // Валидация файлов (проверяем формат и размер)
- if(errorMsg = validateFile(file))
- {
- soundError();
- $('#error').fadeIn(1000);
- $("#error").html('<div style="color: #fff; font: 17px roboto; margin-bottom: 15px; text-align: center;">'+errorMsg+'</div>');
- error();
- return;
- }
- // Добавляем файл в объект selectedFiles
- selectedFiles[file.name] = file;
- queue.push(file);
- }
- $(this).val('');
- processQueue(); // запускаем процесс создания миниатюр
- });
- // Валидация выбранного файла (формат, размер)
- var validateFile = function(file)
- {
- if(!file.type.match(/image\/(jpeg|jpg|png|gif)/))
- {
- return 'Фотография должна быть в формате jpg, png или gif';
- }
- if(file.size > maxFileSize)
- {
- return 'Размер фотографии не должен превышать 10 Мб';
- }
- };
- var listen = function(element, event, fn)
- {
- return element.addEventListener(event, fn, false);
- };
- // Создание миниатюры
- var processQueue = function()
- {
- // Миниатюры будут создаваться поочередно
- // чтобы в один момент времени не происходило создание нескольких миниатюр
- // проверяем запущен ли процесс
- if (isProcessing) { return; }
- // Если файлы в очереди закончились, завершаем процесс
- if (queue.length == 0) {
- isProcessing = false;
- return;
- }
- isProcessing = true;
- var file = queue.pop(); // Берем один файл из очереди
- var li = document.createElement('LI');
- var span = document.createElement('SPAN');
- var spanDel = document.createElement('SPAN');
- var canvas = document.createElement('CANVAS');
- var ctx = canvas.getContext('2d');
- canvas.setAttribute('width', previewWidth);
- canvas.setAttribute('height', previewHeight);
- span.setAttribute('class', 'img');
- spanDel.setAttribute('class', 'fa fa-ban delete');
- spanDel.innerHTML = '';
- li.appendChild(span);
- li.appendChild(spanDel);
- li.setAttribute('data-id', file.name);
- image.removeEventListener('load', imgLoadHandler, false);
- // создаем миниатюру
- imgLoadHandler = function()
- {
- ctx.drawImage(image, 0, 0, previewWidth, previewHeight);
- URL.revokeObjectURL(image.src);
- span.appendChild(canvas);
- isProcessing = false;
- setTimeout(processQueue, 200); // запускаем процесс создания миниатюры для следующего изображения
- };
- // Выводим миниатюру в контейнере previewPhotoContainer
- previewPhotoContainer.appendChild(li);
- listen(image, 'load', imgLoadHandler);
- image.src = URL.createObjectURL(file);
- // Сохраняем содержимое оригинального файла в base64 в отдельном поле формы
- // чтобы при отправке формы файл был передан на сервер
- var fr = new FileReader();
- fr.readAsDataURL(file);
- fr.onload = (function (file) {
- return function (e) {
- $('#preview-photo').append(
- '<input type="hidden" name="photos[]" value="' + e.target.result + '" data-id="' + file.name+ '">'
- );
- }
- }) (file);
- };
- // Удаление фотографии
- $(document).on('click', '#preview-photo li span.delete', function()
- {
- var fileId = $(this).parents('li').attr('data-id');
- if (selectedFiles[fileId] != undefined) delete selectedFiles[fileId]; // Удаляем файл из объекта selectedFiles
- $(this).parents('li').remove(); // Удаляем превью
- $('input[name^=photo][data-id="' + fileId + '"]').remove(); // Удаляем поле с содержимым файла
- });
- }
эта функция занимается отправкой формы
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- function addObj(form)
- {
- var formData = new FormData(form);
- var photo = $('#photo').val();
- formData.append('name', $('#name').val());
- formData.append('photo', objects.photo);
- ShowLoading('');
- $.ajax({
- url: "/functions.php",
- type: "POST",
- dataType : "json",
- cache: false,
- contentType: false,
- processData: false,
- data: formData, //указываем что отправляем
- success: function(data)
- {
- HideLoading(data);
- switch(data.ok)
- {
- case 'Y':
- $("#IdForm").fadeOut(900);
- setTimeout(function()
- {
- $(".ResAddObj").html('<div style="font: 23px roboto; text-align: center;">Ваше объявление успешно добавлено. Вам перезвонят ближайшее время!</div>');
- scroll(0,0);
- }, 1000);
- break;
- case '1':
- soundError();
- $('#error').fadeIn(1000);
- $("#error").html('<div style="color: #fff; font: 17px roboto; margin-bottom: 15px; text-align: center;">Некорректно указано имя</div>');
- error();
- break;
- /* вообщем далее отображение ошибок */
- }
- }
- });
- return false;
- }
В каком виде сейчас выложен код не создаются привю изображений после выбора. Пробовал делать из двух функций объекты. В этом случае превю создаются, но не получается отправить файл. (пример кода вложении)
Помогите пожалуйста сделать.... времени нету уже разбираться с этим, да и не знаю уже в какую сторону копать