Загрузка файла на сервер через AJAX. Как сделать?

Короче, понял, делать через iframe

jquery.form.js
/thread

Почему обязательно на флеш.
Я как понял из предыдущей темы, вам нужно под jQuery? Вот, посмотрите на Uploadify.
Он поддерживает как Flash так и HTML5 версии.

Спасибо! посмотрю

и это тоже

У Uploadify HTML5 версия за деньги только

Ну если не хочется платить ~400 руб за стандартную лицензию, то в инете есть кучи уже хакнутых версий. Например, вот. Хотя 400 рублей за библиотеку, которую будешь писать часа 2 где-то, это вполне себе приемлемая цена, можно отдать.

хакнутые не хочу использовать, если честно

http://www.dropzonejs.com/ неплохая

Using FormData Objects: sending files using a FormData object. MSIE 10+.

Что-то пробую через jquery.form.js - все равно страница перезагружается..

Код формы:

<form class="form-inline upload" enctype="multipart/form-data" id="form{{ number }}">
				  <div class="form-group">
				    <div class="fileinput fileinput-new" data-provides="fileinput">
					    <span class="btn btn-default btn-file"><span></span><input id="file{{ number }}" type="file" /></span>
					    <span class="fileinput-filename"></span><span class="fileinput-new"></span>
					</div>
				  </div>
				  <input type="submit" class="btn btn-primary" value="Загрузить"/>
			</form>

var options = {
	url: "files.php",
        type: 'post',
        iframe: true,
        dataType: 'json',
        success:    function(data) { 
            console.log(data);
        }
	};

	$("form.upload").submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    }); 

$(«form.upload»).ajaxForm(options);
И всё.

jquery.on может.. сейчас попробую

Если формы генерятся скриптом - читай, как биндить ивенты для создаваемых элементов. Есть в документации к .on()

Переделал так:

var options = {
		url: "files.php",
        type: 'post',
        iframe: true,
        dataType: 'json',
        success:    function(data) { 
            console.log(data);
        }
	};

	$("form.upload").on("submit", function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    }); 

Посмотри в консоль браузера, ошибка там наверное.

«Форма содержит атрибут «enctype=multipart/form-data», но не содержит атрибут «method=post». Вместо этого для отправки данных будет использоваться метод «GET» без указания типа содержимого.»

Убрал - ошибка исчезла, но страница как перезагружалась, так и перезагружается...

сам плагин подключен - уже тыщу раз проверил

Попробуйте на beforeSubmit какой-нить console.log кинуть, и посмотрите, срабатывает или нет. Может все-таки что-то не так прикрутили?

Перегружается обычно, когда не делаешь return false для submit или ошибка JavaScript при условии, что плагин работает.

Вот пример, не проверял, но с виду рабочий https://github.com/Oyamasiphula/upload_and_displayImg_asa_post_app/blob/maste...

Переделал так:

var options = {
		url: "files.php",
        type: 'post',
        iframe: true,
        dataType: 'json',
        beforeSubmit: function(){
        	console.log('beforeSubmit done');
        },
        success: function(data){
  
            console.log("data");
        }
	};

	$('form.upload').on("submit", function() {
		
        $(this).ajaxSubmit(options);

        return false;
    });

А ты в какой момент этот $('form.upload').on вызываешь? Случайно не до того, как форма создана на странице аяксом?

Даааа! точно..
Сделал так:

$('#tree1').bind(
	    'tree.init',
		    function() {

		    var options = {
				url: "files.php",
		        type: 'post',
		        iframe: true,
		        dataType: 'json',
		        beforeSubmit: function(){
		        	console.log('beforeSubmit done');
		        },
		        success: function(data){
		  
		            console.log("data");
		        }
			};

			$('form.upload').on("submit", function() {

		        $(this).ajaxSubmit(options);

		        return false;
		    });
	        
	    }
	);

Теперь другая проблема: в success вместо console.log(«data»); написал console.log(data); , в files.php написал

<?php
echo "test data";

Пальцем в небо, а ты уверен что dataType: 'json' должен быть, если ты туда такие данные посылаешь?

У тебя в опциях

dataType: 'json',

А ты пытаешься бросить просто текст

echo «test data»;

Console.log просто не может распарсить, ты отправь application/json

echo json_encode(array('test' => 'test data'));

console.log(data.test);

Да, уже понял, туплю)) Посмотрел ответ сервера через инструменты разработчика - сеть, ответ есть) надо пореже писать и почаще думать)

FileReader объект есть.

Метод там есть, который представляет файл в bas64. Отправляешь его POST-переменной и на сервере раскодируешь. Можно даже кусочками отправлять