как правильно вызвать функцию только по 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, время: 21:30. |