JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<form class="fileform" name="upload">
<div class="selectbutton">Сделать фото</div>
<input id="upload" type="file" name="myfile">
</form>
<div id="status">
</div>
<div class="ajax-respond" id="ajax_respond"><!-- Ответ сервера на загрузку фото -->
<img src='success.png' alt='OK' />
</div>
</div>
CSS
.ajax-respond {
display: inline-block;
float: right;
visibility: hidden;
}
JavaScript
function XmlHttp()
{
var xmlhttp;
try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e)
{
try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch (E) {xmlhttp = false;}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function ajax(param)
{
if (window.XMLHttpRequest) req = new XmlHttp();
method=(!param.method ? "POST" : param.method.toUpperCase());
if(method=="GET")
{
send=null;
param.url=param.url+"&ajax=true";
}
else
{
send="";
for (var i in param.data) send+= i+"="+param.data[i]+"&";
// send=send+"ajax=true"; // если хотите передать сообщение об успехе
}
req.open(method, param.url, true);
if(param.statbox)document.getElementById(param.statbox).innerHTML = '<img src="http://infod.educacion.gob.ar/frontend/images/loader.gif">';
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(send);
req.onreadystatechange = function()
{
if (req.readyState == 4 && req.status == 200) //если ответ положительный
{
if(param.success)param.success(req.responseText);
}
}
}
//<!-- конец AJAX блока -->
function submitFile( jQuery ) {
(function($){
// Глобальная переменная куда будут располагаться данные файлов. С ней будем работать
var files;
// Вешаем функцию на событие
$('input[type=file]').change(function(){
ajax_respond.style.visibility='hidden'; //Скрываем ответ сервера
files = this.files; // Получим данные файлов и добавим их в переменную
event.stopPropagation(); // Остановка происходящего
event.preventDefault(); // Полная остановка происходящего
// Создадим данные формы и добавим в них данные файлов из files
var data1 = new FormData();
$.each( files, function( key, value ){
data1.append( key, value );
//console.log("№ " + number_flight);
data1.append("number_flight", number_flight);
});
//console.log(data1.getAll('number_flight'));
// Отправляем запрос
$.ajax({
url:...