как правильно вызвать функцию только по success?
Здравствуйте есть плагин загрузки изображений
и он подключен в области head $(document).ready(function() { // Консоль var $console = $("#console"); // Инфа о выбранных файлах var countInfo = $("#info-count"); var sizeInfo = $("#info-size"); // ul-список, содержащий миниатюрки выбранных файлов var imgList = $('#img-list'); // Контейнер, куда можно помещать файлы методом drag and drop var dropBox = $('#img-container'); // Счетчик всех выбранных файлов и их размера var imgCount = 0; var imgSize = 0; // Стандарный input для файлов var fileInput = $('#file-field'); //////////////////////////////////////////////////////////////////////////// // Подключаем и настраиваем плагин загрузки fileInput.damnUploader({ // куда отправлять url: '/functions_server_logic/index/', // имитация имени поля с файлом (будет ключом в $_FILES, если используется PHP) fieldName: 'my-pic', // дополнительно: элемент, на который можно перетащить файлы (либо объект jQuery, либо селектор) dropBox: dropBox, // максимальное кол-во выбранных файлов (если не указано - без ограничений) limit: 1, // когда максимальное кол-во достигнуто (вызывается при каждой попытке добавить еще файлы) onLimitExceeded: function() { log('Допустимое кол-во файлов уже выбрано'); }, // ручная обработка события выбора файла (в случае, если выбрано несколько, будет вызвано для каждого) // если обработчик возвращает true, файлы добавляются в очередь автоматически onSelect: function(file) { addFileToQueue(file); return false; }, // когда все загружены onAllComplete: function() { log('<span style="color: blue;">*** Все загрузки завершены! ***</span>'); imgCount = 0; imgSize = 0; updateInfo(); } }); //////////////////////////////////////////////////////////////////////////// // Вспомогательные функции // Вывод в консоль function log(str) { $('<p/>').html(str).prependTo($console); } // Вывод инфы о выбранных function updateInfo() { countInfo.text( (imgCount == 0) ? 'Изображений не выбрано' : ('Изображений выбрано: '+imgCount)); sizeInfo.text( (imgSize == 0) ? '-' : Math.round(imgSize / 1024)); } // Обновление progress bar'а function updateProgress(bar, value) { var width = bar.width(); var bgrValue = -width + (value * (width / 100)); bar.attr('rel', value).css('background-position', bgrValue+'px center').text(value+'%'); } // преобразование формата dataURI в Blob-данные function dataURItoBlob(dataURI) { var BlobBuilder = (window.MSBlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder); if (!BlobBuilder) { return false; } // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs var pieces = dataURI.split(','); var byteString = (pieces[0].indexOf('base64') >= 0) ? atob(pieces[1]) : unescape(pieces[1]); // separate out the mime component var mimeString = pieces[0].split(':')[1].split(';')[0]; // write the bytes of the string to an ArrayBuffer var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } // write the ArrayBuffer to a blob, and you're done var bb = new BlobBuilder(); bb.append(ab); return bb.getBlob(mimeString); } // Отображение выбраных файлов, создание миниатюр и ручное добавление в очередь загрузки. function addFileToQueue(file) { // Создаем элемент li и помещаем в него название, миниатюру и progress bar var li = $('<li/>').appendTo(imgList); /* var title = $('<div/>').text(file.name+' ').appendTo(li); */ var cancelButton = $('<a/>').attr({ href: '#cancel', title: 'отменить' }).html('<img height="15" width="15" alt="X" src="/img/Very-Basic-Cancel-icon.png">').appendTo(/* title */li); // Если браузер поддерживает выбор файлов (иначе передается специальный параметр fake, // обозночающий, что переданный параметр на самом деле лишь имитация настоящего File) if(!file.fake) { // Отсеиваем не картинки var imageType = /image.*/; if (!file.type.match(imageType)) { log('Файл отсеян: `'+file.name+'` (тип '+file.type+')'); return true; } // Добавляем картинку и прогрессбар в текущий элемент списка var div = $('<div/>').addClass('photo_frame').attr('rel', '0').appendTo(li); var img = $('<img/>').appendTo(li); /* var pBar = $('<div/>').addClass('progress').attr('rel', '0').text('0%').appendTo(li); */ // Создаем объект FileReader и по завершении чтения файла, отображаем миниатюру и обновляем // инфу обо всех файлах (только в браузерах, подерживающих FileReader) if($.support.fileReading) { var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.attr('src', e.target.result); aImg.attr('height', 100); }; })(img); reader.readAsDataURL(file); } log('Картинка добавлена: `'+file.name + '` (' +Math.round(file.size / 1024) + ' Кб)'); imgSize += file.size; } else { log('Файл добавлен: '+file.name); } imgCount++; updateInfo(); // Создаем объект загрузки var uploadItem = { file: file, onComplete: function(successfully, data, errorCode) { if(successfully) { log('Файл `'+this.file.name+'` загружен, полученные данные:<br/>*****<br/>'+data+'<br/>*****'); } else { if(!this.cancelled) { log('<span style="color: red;">Файл `'+this.file.name+'`: ошибка при загрузке. Код: '+errorCode+'</span>'); } } } }; // ... и помещаем его в очередь var queueId = fileInput.damnUploader('addItem', uploadItem); // обработчик нажатия ссылки "отмена" cancelButton.click(function() { fileInput.damnUploader('cancel', queueId); li.remove(); imgCount--; imgSize -= file.fake ? 0 : file.size; updateInfo(); log(file.name+' удален из очереди'); return false; }); return uploadItem; } //////////////////////////////////////////////////////////////////////////// // Обработчики событий // Обработка событий drag and drop при перетаскивании файлов на элемент dropBox dropBox.bind({ dragenter: function() { $(this).addClass('highlighted'); return false; }, dragover: function() { return false; }, dragleave: function() { $(this).removeClass('highlighted'); return false; } }); // Обаботка события нажатия на кнопку "Загрузить все". // стартуем все загрузки // Обработка события нажатия на кнопку "Отменить все" $("#cancel-all").click(function() { fileInput.damnUploader('cancelAll'); imgCount = 0; imgSize = 0; updateInfo(); log('*** Все загрузки отменены ***'); imgList.empty(); }); //////////////////////////////////////////////////////////////////////////// // Проверка поддержки File API, FormData и FileReader if(!$.support.fileSelecting) { log('Ваш браузер не поддерживает выбор файлов (загрузка будет осуществлена обычной отправкой формы)'); $("#dropBox-label").text('если бы ты использовал хороший браузер, файлы можно было бы перетаскивать прямо в область ниже!'); } else { if(!$.support.fileReading) { log('* Ваш браузер не умеет читать содержимое файлов (миниатюрки не будут показаны)'); } if(!$.support.uploadControl) { log('* Ваш браузер не умеет следить за процессом загрузки (progressbar не работает)'); } if(!$.support.fileSending) { log('* Ваш браузер не поддерживает объект FormData (отправка с ручной формировкой запроса)'); } log('Выбор файлов поддерживается'); } log('*** Проверка поддержки ***'); }); Я пытаюсь произвести загрузку только по получении успеха в аяксе $.ajax({ type: 'POST', dataType:'html', url: '/admin_tours/add_tour/', data: {array:array}, success: function(data) { fileInput.damnUploader('startUpload'); alert('Тур успешно создан') window.location.href = 'http://interclient.net/admin_tours/create_tour'; }, error: function(xhr, str){ alert('Возникла ошибка в add_tour: ' + xhr.responseCode); } }); У меня ошибка ReferenceError: fileInput is not defined fileInput.damnUploader('startUpload'); подскажите что не так и как быть? |
Так он сам не загружает что ли, это чудесный плагин?
|
Загружает, я его под форму подстраиваю, видно не инициализированно что то у меня с этим пока проблемы, мне необходимо сначала базу заполнить другой инфой а потом к этой инфе добавить фотки поэтому нужно только по success производить загрузку
|
Блин, вы же можете загрузить им файл или только вот так - только с постом можете? Проверьте - он загружает файлы вообще и все такое. Ну то есть на сервер-то что приходит от него? Это ж элементарно - дамп $_FILES и все. Или куда оно грузиццо?
|
все загружает просто я не обладаю достаточными знаниями в JS почему undefined fileInput.damnUploader('startUpload');
|
Понял. Ну вообще-то делается не так. На клиенте все проверяется чтоб файло не гонять понапрасну, а если все-таки на сервере обнаруживается ошибка - на сервере еще раз все проверяется по той же схеме - то юзер сам дурак, или хакер - значит так ему и надо.
Откуда он вообще появляется этот FileInput ? А, понял, автоматически создается. ЗЫ Я тоже слабо разбираюсь в скопах ява-скрипта, но засуньте его пропертью в тот же объект аякса и затем в суксессе запустите. fileInput:FileInput, ... this.fileInput('текстовая команда, это изобретение!') |
Я не могу понять если скрипт подключен и в нем вот такая строка
var fileInput = $('#file-field'); то почему в ответ на вот такую комманду alert(fileInput.attr('id')) ниже в js коде я получаю ReferenceError: fileInput is not defined alert(fileInput.attr('id')) Просто объясните как получить этот айди В объект аякса я могу засунуть только то что определено |
Цитата:
Короче, вы же не управляте ничем когда хотите закачать файло через этот плугин. Потому что ему не надо управления - он висит на кнопках и сам собой управляет. А вы захотели им управлять. По логике вам надо поднять событие чтобы соответствующие методы обхекта сработали. Например найти ту самую кнопку, получить ее как объект и в суссесфуле нажать elem.click() - файл должен пойти на закачку и в интерфейсе все отобразиться. |
"Урри, где у него кнопка?"
Что это вообще за хератень - fileInput.damnUploader('startUpload'); - что передается? - Имя метода или просто текстовая команда? Короче пользователь должен нажать кнопку-ссылку или что там еще чтобы начался уплоад. Найдите эту кнопку и нажмите ее из своего скрипта в нужный момент и все. Или допишите метод получения внешнего управления. ВОобще странно что его нет, или я не понял где он вылазиет. И еще, с какого это в "объект аякс" нельзя пихать свои проперти? Они что скопом-дампом все валит на сервер? |
Попалась такая халявная либа для закачки файла, наверно все давно знают - http://www.plupload.com/
Сам юзать не могу - jquery нету. Но главное что если просто файло закачивать - это просто, а если вместе с данными, то отделение данных от файлА приводит к геморрою по управлению помойкой во временной папке. В принципе если сервер большой то и грести там не надо. |
Часовой пояс GMT +3, время: 23:40. |