HTML:
<input type="text" name="description"> <input type="file" name="image" accept=".jpg"> Как я могу использовать $.ajax для загрузки изображения и текстового значения? У меня нет проблем с созданием объекта для отправки текстовых данных, но я понятия не имею, с чего начать с изображения.
Я использую PHP-сервер, поэтому кодирование изображения в base64 или подобных методах вполне приемлемо.
проще всего использовать FormData() :
Итак, теперь у вас есть объект FormData, готовый к отправке вместе с XMLHttpRequest. и добавить поля с помощью объекта FormData
<script type="text/javascript"> $(document).ready(function () { var form = $('form'); //valid form selector form.on('submit', function (c) { c.preventDefault(); var data = new FormData(); $.each($(':input', form ), function(i, fileds){ data.append($(fileds).attr('name'), $(fileds).val()); }); $.each($('input[type=file]',form )[0].files, function (i, file) { data.append(file.name, file); }); $.ajax({ url: '/post_url_here', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function (c) { //code here if you want to show any success message } }); return false; }); }) </script>
и принуждение jQuery не добавлять заголовок Content-Type для вас, в противном случае строка с границей загружаемого файла будет отсутствовать.
Используйте jQuery form js для загрузки изображений с помощью ajax.
Проверьте https://github.com/malsup/form/
var options = { url : 'url', success : function(responseText) { "event after success "} }; $(" form id ").ajaxSubmit(options);
и получить изображение в php-файле и загрузить изображения