Как использовать ajax для загрузки текстового поля и файла?

Я новичок в AJAX и работаю над реализацией формы, которая будет загружать имя и файл в php-файл, который обрабатывает данные и отправляет их в базу данных для вставки с использованием mysqli. Я протестировал php-файл, и он работает. Моя проблема в коде AJAX. Я пробовал реализацию с использованием XMLHTTP и использовал jQuery. Оба оставляют страницу и открывают файл PHP в браузере. В качестве дисквалификатора я разместил этот вопрос на другом сайте кодирования, между двумя плакатами последовала битва, и поэтому я пытаюсь здесь, надеюсь, получить разумный и спокойный ответ с продуктивными предложениями.Как использовать ajax для загрузки текстового поля и файла?

Я понимаю, что в настоящее время «get» отправляется в PHP-файл, а не «post», но PHPStorm сообщает мне, что «post» недоступно в этой форме. Какая у меня альтернатива? Я на правильном пути или есть другое направление, куда я должен идти? Как обновить только форму и оставить страницу PHP загруженной?

Вот соответствующий отрывок из моего кода,

<!DOCTYPE html> 
<html> 
<head> 
    <script src="jquery.min.js"></script> 
    <script src="jquery.validate.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('#addForm').validate({ 

       submitHandler: function (form) { 
        $('input[name="usingAJAX"]', this).val('true'); 
        var url = $(form).prop('action'); 
        var dataToSend = $(form).serialize(); 
        var callback = function(dataReceived) { 
         $(form).hide(); 
         //result message 
         $('body').append(dataReceived) 
        }; 
        var typeOfDataToReceive = 'html'; 

        $.get(url, dataToSend, callback, typeOfDataToReceive), 
        return false; 
       } 
      }); 
     }); 

    </script> 
</head> 
<body> 
<form id="addForm" action="addInfo.php" enctype="multipart/form-data"> 
    <input type="hidden" name="usingAJAX" value="false"/> 
    <label for="aname">Name: </label> 
    <input type="text" name="aname" id="aname" class=required/> 
    <label for="aimage">Photo: </label> 
    <input id="aimage" type="file" name="aimage" class="required"> 
    <input type="submit" value="ADD"/> 
</form> 
</body> 
</html>

источник

2013-03-12 STFU_NC

Вы не можете загружать файлы с помощью AJAX. Общее обходное решение - отправить форму в скрытый iframe. –

Попробуйте использовать плагин JQuery form.js http://www.malsup.com/jquery/form/#file-upload Вы можете загружать файлы с помощью AJAX и JQuery. Он прост в использовании, просто нужно дать #form-id в функции ajaxSubmit.

<script> 
    $(document).ready(function() { 
     $('#addForm').validate({ 

      submitHandler: function (form) { 
       $('input[name="usingAJAX"]', this).val('true'); 
       var options = { 
        url : $(form).prop('action'), 
        dataToSend : $(form).serialize(), 
        callback : function(dataReceived) { 
        $(form).hide(); 
        //result message 
        $('body').append(dataReceived) }, 
        typeOfDataToReceive = 'html'; 
        //your options here 
       }; 

       $('#yourFormid').ajaxSubmit(options); 

       return false; 
      } 
     }); 
    }); 

</script>

источник

2013-03-12 16:05:39 ammu

До недавнего времени вы не могли загружать файлы с помощью ajax.

Вы по-прежнему не можете загрузить файл непосредственно с помощью ajax, но вы можете сделать это программно с помощью API файлов HTML5.

Тем не менее, если вы ищете простые решения, попробуйте использовать традиционный подход IFrame.

Если вы хотите использовать технологию бледного края, используйте File API. Вот некоторые tutorial как читать файлы с javascript.

шагов для загрузки с помощью AJAX:

Чтения файла с яваскриптом FileReader API.
Опубликовать содержимое файла, закодированного в base64 или что-то еще, на сервер.
Serverside, расшифровывать содержимое файла программно.

При использовании этого подхода файл не будет обрабатываться как загрузка файла сервером. Это будет просто другое поле запроса с текстом внутри. Это зависит от вас, чтобы расшифровать его на стороне сервера.

API-интерфейс filereader позволяет считывать часть файла по частям и загружать фрагменты файла, поэтому можно было бы загружать огромные файлы в куски, но вам нужно самому справиться с этим.

источник

2013-03-12 16:29:53 SWilk

Как использовать ajax для загрузки текстового поля и файла?

ответ

Смежные вопросы