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

196
30 августа 2018, 07:50

Доброго времени суток!

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

Есть такая форма:

<form name="uploadimages" method="post" enctype="multipart/form-data">
<input id="uploadimage" type="FILE" name="uploadimage" id="uploadfile">
</form>

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

 <script type="text/javascript">
        function setimage() {
        var uploadfile = $("#uploadimage").val();
        $.ajax({
                type: "POST",
                url: "uploadimages.php",
                data: "img=" + uploadfile,
        success: function(html){
                    $("#textar").append(html);
                }
            }); 
        }
 </script>

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

//тут объявляется функция
$img = $_POST['img'];//получаем данные
$image = imageResize($img, 'litimages', 1000, 1000);//делаем ресайз (пареметры - картнка, директория для сохраненияя, размеры)
$image = "<br><br><img src='".$image."' width='700'><br><br>"; //вставляем в тег адрес 
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();

отправляется название картинки, а не сама картинка.

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

Answer 1

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

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, а потом к работающему код попытайтесь его прикрутить.

Answer 2

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

HTML код:

<form id='loadPhform' action='index.php' method='POST' enctype = 'multipart/form-data'> 
    <input id='thisPh' type='file' name='insPh' multiple><br/>
</form>

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 код:

<?php
    $Array = array();
    $count = -1;
    //Upload Files
    foreach($_FILES as $Pictures) {
        $count++;
        /***Здесь происходит загрузка изображений (можно и в базу вместе)***/
           //Здесь накапливается массив с путями изображений (чтобы например вывести эти все фотки)
        $Array[$count] = $namePic;
    }
   //Здесь мы через JSON в элементе [srcPart] отправляем массив путей изображений , в элементе
  // [lengthArr] сколько изображений , в элемение [state] состояние 
    $json_data = array ('srcPart' => $Array, 'lengthArr' => $count, 'state' => "success");
    echo json_encode($json_data);
?>
READ ALSO
Проблемы с камерой в EmguCV (OpenCV) C#

Проблемы с камерой в EmguCV (OpenCV) C#

Начал изучать библиотеку EmguCV для C#, дошел до класса VideoCaptureВообще "пустой" конструктор включает web-камеру, для ноутбука, со встроенной web-камерой...

147
Masstransit, получение сообщений по расписанию

Masstransit, получение сообщений по расписанию

Есть ли способ получать сообщения по расписанию в MassTransit? Например, каждый час начинать получать сообщения из очереди и останавливаться,...

172