jQuery ajax аплоад файлов
пытаюсь сделать аплоад файлов на сервер.
задача: выбрать локальный файл, указать для него параметры (описание, какй-то тип, не важно, это указывает юзер) и по сабмиту отправить его, а все введённые параметры записать в базу. использую jQueryForm. получается всё, кроме загрузки файла. пробовал плагины alaxfileuploader, oneclickupload. если грузить файл отдельно, то работает. если передавать еще и параметры, вылазит "Error: Form elements must not be named "submit"." В какую сторону копать? мож я принципиально чтото не так делаю, jquery только начал изучать. |
код?
|
$(document).ready(function() {
var options = {
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
$('#formadd').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
$('#upload1').upload({
name: 'file',
method: 'post',
enctype: 'multipart/form-data',
action: 'upload.php'
});
});
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('About to submit: \n\n' + queryString);
centerPopup();
loadPopup();
return true;
}
function showResponse(responseText, statusText) {
disablePopup();
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText);
}
|
Цитата:
|
передаются еще несколько текстовых полей, чекбокс и выпадающий список.
|
а что говориться в сообщении об ошибке понимаешь?
|
понимаю.
но когда нет кода, где передаётся файл, то всё работает отлично, и его сабмиты не волнуют ) |
а что происходит, если исправить код в соответствии с ошибкой?
|
извините, я чуть не правильно описал проблемму.
такая ошибка вылазит, когда используется обычный инпут типа файл. когда используется ванкликаплоад, он работает, только он шлёт сабмит, когда я выбираю файл, то есть не даёт установить другие параметры ( как всё запутано |
ммм ... а такой вариант?
$('#upload1').upload({
name: 'file',
method: 'post',
enctype: 'multipart/form-data',
action: 'upload.php',
[B] onSubmit: function() {
$('#formadd').ajaxSubmit(options);[/B]
},
onComplete: function(data) {
$('#progress1').text('Файл успешно отправлен');
}
});
|
1) one-click upload: читаем документацию
2) ajaxSubmit: что говориться в сообщении об ошибке? 3) Цитата:
4) зачем тебе и jquery form и one-click upload? 5) что ты вообще пытаешься сделать? Для upload'а файлов на сервер javascript не нужен |
Угу, не полностью понимаю как это всё реализовать(
Итак, задача. Нужно загрузить на сервер файл, для этого файла указать некоторое описание и указать некоторую категорию. файл может быть большой. и пока будет происходить загрузка файла, нужен прогресбар Загрузка. |
http://plugins.jquery.com/
ключевые слова upload progress |
есть, кстати, такая штука - http://swfupload.org/
|
видеть, сколько осталось, не обязательно. да и флеш не желательно.
меня устраивает вариант с ocupload. но опять же, при выборе файла происходит автосабмит, хотя autoSubmit: false.
$(document).ready(function() {
var options = {
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
var myUpload = $(upload).upload({
name: 'file',
action: 'post.php',
enctype: 'multipart/form-data',
autoSubmit: false
});
popupStatus = 0;
$('#formadd').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('About to submit: \n\n' + queryString);
centerPopup();
loadPopup();
return true;
}
function showResponse(responseText, statusText) {
disablePopup();
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText);
}
я ж не сложного хочу, но никак не пойму, что не так делаю |
тебе же нужен progress bar: где написано, что он есть в one-click upload?
по поводу автосабмита: ты документацию читал? Там все написано зачем ты используешь ajaxSubmit? Пытайся понять, что ты делаешь, это полезно ;) |
переделал.
function FormClick () {
centerPopup();
loadPopup();
var str = $("#formadd").serialize();
$.post("post.php", str, function(data) {
disablePopup();
alert('status: ' + data);
});
}
HTML <FORM action="post.php" method="post" enctype="multipart/form-data" name="formadd" id="formadd"> <INPUT type="file" name="file"> <INPUT type="button" name="add" value="Add" onclick="FormClick(); return false"> </FORM> PHP <?php sleep (3); echo $_FILES['file']['name']; ?> возвращает ничего |
давай ты начнешь с того, что спросишь, что тебе непонятно в твоем коде? Потом ты сам сможешь ответить, почему оно ничего не возвращает
|
в коде из последнего поста всё понятно. любые другие параметры передаются. а файл нет.
|
...
var str = $("#formadd").serialize();
alert(str);
$.post("post.php", str, function(data) {
...
что выдает alert? |
все введенные в форме значения, кроме поля file
|
т.е. еще на клиентской стороне input type=file игнорируется. А все потому, что javascript не может получить доступ к файловой системе, к передаваемому файлу, выбрать файл - ограничения безопасности, чтобы javascript не мог утащить у пользователя информацию без его ведома... javascript может лишь спрашивать у сервера, что там с загрузкой файла, либо организовать передачу файла без перезагрзки страницы
т.е. надо искать плагины, которые рассчитаны на работу с input-type="file" |
Цитата:
|
Цитата:
или ты про то, что обычно что-то не устраивает? |
Я про то, что элементарную вещь, вроде фоновой отправки файлов на сервер, превратили в размусоливание плагинов jQuery.
|
вообще-то не знаю... имхо начинать можно с jQuery+плагины, а потом можно либо свои плагины начать писать, либо от jQuery отказаться
|
Получилось так, с помощью http://valums.com/ajax-upload/
$(document).ready(function() {
new Ajax_upload('#upload', {
action: 'post.php',
name: 'myfile',
onSubmit : function(file){
centerPopup();
loadPopup();
var str = $("#formadd").serialize();
alert(str);
$.post("post.php", str, function(data) {
alert('status: ' + data);
});
},
onComplete : function(file){
disablePopup();
alert(file + " succesfully upload");
}
});
});
|
т.е. ты предпочитаешь делать два запроса вместо одного? И отдельно принимать файл и остальные параметры? И что у тебя форма отправляется сразу после выбора файла?
|
то что отправляется сразу после выбора файла это не критично.
а то что два запроса ... по другому пока никак не придумал( |
Цитата:
|
Цитата:
frstua, какой вариант выбираешь? ;) Цитата:
|
документация? ммм
ты имеешь ввиду:
var myUpload = $(element).upload({
params: {name: $(”#name”).value, description: $(”#descr”).value}
?? |
я имею в виду: поищи здесь слово autoSubmit
|
имеем
$('#upload').upload({
name: 'file',
method: 'post',
enctype: 'multipart/form-data',
action: 'post.php',
autoSubmit: false,
onSubmit: function() {},
onComplete: function() {}
});
и всё равно форма сабмитится после выбора файла |
ну что ж, one-click upload тупо игнорирует autoSubmit (почему-то)
значит надо либо искать другой плагин, либо исправлять этот, либо забить на этот jQuery и сделать все самому, как советовал Kolyaj |
Цитата:
|
это называется "сделано через ...": во-первых, лишний запрос, во-вторых, тебя устраивает, что файл передается отдельно от остальных параметров?
Или у тебя только один файл должен передаваться? какие у тебя параметры, кроме файла, есть на этой форме? |
Цитата:
|
всё таки бок есть, если передаются два запроса. получается добавление в базу два раза ((
У меня есть файл и есть к нему описание с текстового поля и тип с выпадающего списка. юзер указывает описание, тип, выбирает файл, жмёт отправить. после нажатия вылазит окно "ждите загрузка", после загрузки окно пропадает, появляется например "загрузка прошла успешно". на сервере в базу добавляется запись с именем файла типом и описанием. |
$(document).ready(function() {
var upload = new Ajax_upload('#upload', {
action: 'post.php',
name: 'file',
autoSubmit: true,
onSubmit : function(){
upload.setData({'descr': $("#descr").val(), 'mxsw': $("#checkbox").val(), 'typebase': $("#typebase").val()});
centerPopup();
loadPopup();
},
onComplete : function(file){
disablePopup();
alert(file + " succesfully upload");
}
});
});
|
| Часовой пояс GMT +3, время: 13:52. |