Передать через ajax данные формы file

#jquery #ajax #php #javascript

Доброго времени суток! 
Есть у меня такая проблемка - собираюсь осуществить загрузку картинок на сайт без
перезагрузки страницы через ajax.
Есть такая форма:




и вот такая функция, которая должна отправлять аяксом файл из поля загрузки в обработчик
вот так:
 

С этим проблем нет, в обработчике все работает, кроме одного - там есть функция ресайза,
которая по отдельности тоже работает!
Выглядит примерно так:
//тут объявляется функция

$img = $_POST['img'];//получаем данные

$image = imageResize($img, 'litimages', 1000, 1000);//делаем ресайз (пареметры -
картнка, директория для сохраненияя, размеры)

$image = "



"; //вставляем в тег адрес 
echo $image; //и возвращаем

Все логично, но на деле выдает ошибку: 

Catchable fatal error: Argument 1
passed to imageResize() must be an
array, string given, called in
Z:\home\superli\www\uploadimages.php
on line 92 and defined in
Z:\home\superli\www\uploadimages.php
on line 5

Это, как по мне, связанно с тем, что вот тут

var uploadfile = $("#uploadimage").val();

отправляется название картинки, а не сама картинка.
Помогите, пожалуйста, разобраться, как правильней отправлять сам файл, заранее спасибо!    

Ответы

Ответ 1

Вопрос же про jQuery, а не как загрузить файлы под все браузеры. Всё просто, посмотрите
(jsfiddle): 

function setimage() {
    var $input = $("#uploadimage");
    var fd = new FormData;

    fd.append('img', $input.prop('files')[0]);

    $.ajax({
        url: 'http://example.com/script.php',
        data: fd,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });
}


Обновление

Ох-хо, php тут совсем не причем, доллар вначале имени переменной означает, что скорей
всего она содержит jQuery-коллекцию.

Обновление

А вы свой скрипт то изменили? А не то в примере у вас $_POST['img'], а должен быть
$_FILES['img'] о чем я писал выше. Мне кажется рано вам ещё такими вещами заниматься,
начните с основ php, научитесь загружать файол без ajax, а потом к работающему код
попытайтесь его прикрутить.


Ответ 2

Загрузка множества фотографий с сохранением тех имен фотографий, которые уже загрузились
(это полезно, если их нужно занести в базу, так как можно скачать сразу 200 фотографий
по 5 за каждый круг):
HTML код:
 
    



Javascript код:
//This Virables Is Globals (Объявляем переменные)
    window.Arr = [];
    window.el = $;
    window.LengthImg = 0;
    window.VirableLoading = 0;
    //Download Pictures (Загрузка изображений)
    $('#thisPh').on('change', function() {
        //Create Object FormData (Создание объекта типа form)
        var formData = new FormData();
           //Если выбранные изображение больше 5
        if($('#thisPh')[0].files.length > 5)  return false;
        //Insert File Listes In An Object FormData (Создание вставки массивов изображений
$_FILES в объект formdata )
        $.each($('#thisPh')[0].files, function(count, This_File) {
            //If MIME Type Of Picture Not Match With That Formats (Если не соответствует тип)
            if(!This_File.type.match(/(.png)|(.jpeg)|(.jpg)|(.gif)$/i) || ($('#thisPh')[0].files[count].size
/ 1024).toFixed(0) > 1524)  return false;
                     //Иначе
            else {
                //Append Objects ( вставляем массивы изображений $_FILES в объект
formdata )
                formData.append("image" + count, This_File);
                           //Если мы уже вставили все изображения
                if(count == $('#thisPh')[0].files.length - 1) {
                    var query = 0;
                                   //Вторая защита (если имя НЕ неизвестно)
                    if($("#thisPh")[0].files[0].name != undefined){
                        //Query 
                        $.ajax({
                            url: 'ajaxDocs/DownloadAlbumPhotos.php',
                            type: 'POST',
                            contentType: false,
                            processData: false,
                            dataType: 'json',
                            data: formData,
                            beforeSend: function(loading) { $('.loading').css("display",
"block"); },
                            success: function(data) { 
                                if(data['state'] == "success") {
                                    VirableLoading++;
                                    $('.loading').css("display", "none");
                                    //Cycle
                                    for(var i = 0; i < data['lengthArr'] + 1; i++) {
                                        //Loading More Photos
                                        Arr[LengthImg + i] =  data['srcPart'][i];
                                        //If the cycle is ended
                                        if(i == data['lengthArr']) {
                                            //Length Photos
                                            LengthImg += data['lengthArr'] + 1;
                                            //How Much Pictures Downloaded
                                            $('#DownloadedPics').val("Загружено ("
+ LengthImg + ")");
                                        } 
                                    }
                                }
                            }
                        });
                    }
                }
            }
        }); 
    });

php код:
 $Array, 'lengthArr' => $count, 'state' => "success");
    echo json_encode($json_data);
?>