Как реализовать загрузку файла через форму с помощью JS?

Question

[xuxubla]

Есть скрипт, который позволяет выполнять работу с инфоблоком по шагам. Все замечательно работает, но не могу придумать, как бы добавить возможность брать данные из вложенного файла.
Добавил я, допустим, . По клику на старт выполняется CHttpRequest. Файл естественно не прикрепляется. Что посоветуете? Снизу прикреплю код, длинный, простите.

<?php
if (isset($_REQUEST['work_start']))
{
	define("NO_AGENT_STATISTIC", true);
	define("NO_KEEP_STATISTIC", true);
}

if($_REQUEST['work_start'] && check_bitrix_sessid())
{
	$rsEl = CIBlockElement::GetList(array("ID" => "ASC"), array("IBLOCK_ID" => $BID, ">ID" => $_REQUEST["lastid"]), false, array("nTopCount" => $limit));
	while ($arEl = $rsEl->Fetch())
	{	/*
		 * do something
		 */
		$lastID = intval($arEl["ID"]);
	}

	$rsLeftBorder = CIBlockElement::GetList(array("ID" => "ASC"), array("IBLOCK_ID" => $BID, "<=ID" => $lastID));
	$leftBorderCnt = $rsLeftBorder->SelectedRowsCount();

	$rsAll = CIBlockElement::GetList(array("ID" => "ASC"), array("IBLOCK_ID" => $BID));
	$allCnt = $rsAll->SelectedRowsCount();

	$p = round(100*$leftBorderCnt/$allCnt, 2);

	echo 'CurrentStatus = Array('.$p.',"'.($p < 100 ? '&lastid='.$lastID : '').'","Обрабатываю запись с ID #'.$lastID. key($_FILES) .' ");';
	var_dump($_FILES);
	die();
}

$clean_test_table = '<table id="result_table" cellpadding="0" cellspacing="0" border="0" width="100%" class="internal">'.
						'<tr class="heading">'.
							'<td>Текущее действие</td>'.
							'<td width="1%">&nbsp;</td>'.
						'</tr>'.
					'</table>';
$aTabs = array(array("DIV" => "edit1", "TAB" => "Обработка"));
$tabControl = new CAdminTabControl("tabControl", $aTabs);
?>
<script type="text/javascript">
	var bWorkFinished = false;
	var bSubmit;
	function set_start(val)
	{
		document.getElementById('work_start').disabled = val ? 'disabled' : '';
		document.getElementById('work_stop').disabled = val ? '' : 'disabled';
		document.getElementById('progress').style.display = val ? 'block' : 'none';
		if (val)
		{
			ShowWaitWindow();
			document.getElementById('result').innerHTML = '<?=$clean_test_table?>';
			document.getElementById('status').innerHTML = 'Работаю...';
			document.getElementById('percent').innerHTML = '0%';
			document.getElementById('indicator').style.width = '0%';
			CHttpRequest.Action = work_onload;
			CHttpRequest.Send('<?= $_SERVER["PHP_SELF"]?>?work_start=Y&lang=<?=LANGUAGE_ID?>&<?=bitrix_sessid_get()?>');
		}
		else
			CloseWaitWindow();
	}

	function work_onload(result)
	{
		try
		{
			eval(result);

			iPercent = CurrentStatus[0];
			strNextRequest = CurrentStatus[1];
			strCurrentAction = CurrentStatus[2];

			document.getElementById('percent').innerHTML = iPercent + '%';
			document.getElementById('indicator').style.width = iPercent + '%';

			document.getElementById('status').innerHTML = 'Работаю...';

			if (strCurrentAction != 'null')
			{
				oTable = document.getElementById('result_table');
				oRow = oTable.insertRow(-1);
				oCell = oRow.insertCell(-1);
				oCell.innerHTML = strCurrentAction;
				oCell = oRow.insertCell(-1);
				oCell.innerHTML = '';
			}

			if (strNextRequest && document.getElementById('work_start').disabled)
				CHttpRequest.Send('<?= $_SERVER["PHP_SELF"]?>?work_start=Y&lang=<?=LANGUAGE_ID?>&<?=bitrix_sessid_get()?>' + strNextRequest);
			else
			{
				set_start(0);
				bWorkFinished = true;
			}

		}
		catch(e)
		{
			CloseWaitWindow();
			document.getElementById('work_start').disabled = '';
			alert('Сбой в получении данных');
		}
	}

</script>
<p>Форма для обновления информации о товарах</p>
<form method="post" action="<?echo $APPLICATION->GetCurPage()?>" enctype="multipart/form-data" name="post_form" id="post_form">
<?
echo bitrix_sessid_post();

$tabControl->Begin();
$tabControl->BeginNextTab();
?>
	<tr>
		<td colspan="2">
			<input type="file" name="filename" />
			<input type=submit value="Старт" id="work_start" onclick="set_start(1)" />
			<input type=button value="Стоп" disabled id="work_stop" onclick="bSubmit=false;set_start(0)" />
			<div id="progress" style="display:none;" width="100%">
			<br />
				<div id="status"></div>
				<table border="0" cellspacing="0" cellpadding="2" width="100%">
					<tr>
						<td height="10">
							<div style="border:1px solid #B9CBDF">
								<div id="indicator" style="height:10px; width:0%; background-color:#B9CBDF"></div>
							</div>
						</td>
						<td width=30>&nbsp;<span id="percent">0%</span></td>
					</tr>
				</table>
			</div>
			<div id="result" style="padding-top:10px"></div>
		</td>
	</tr>
<?
$tabControl->End();
?>
</form>

Answer 1

[Дмитрий Беляев]

Посмотрите в сторону FileApi

Answer 2

[Express777]

Возможно это натолкнет вас на правильный путь. Вот как я сохраняю файлы через JS.

// Создаем форму на джавскрипте, туда можно запихнуть любой инпут. В нашем случае нужен файл.
var formData = new FormData();
// Берем файл из инпута. Ид инпута id-input-file-2. Здесь легко использовать getElementByID
	var file = $('#id-input-file-2')[0].files[0];
// Добавляем файл
	formData.append("myFileName", file);
// Отправка на сервер. В вашем случае будет на тот же файл.
	// Вариант через Ваниллу
        //var xhr = new XMLHttpRequest();
	//xhr.open("POST", "/upload/save-file/");
	//xhr.send(formData);
	//
	//xhr.onreadystatechange = function() {
	//
	//	if( xhr.readyState == 4 ) {
	//		Если все хорошо .....
	//	}
	//}

	$fileUpload = $.ajax({
		url: "/upload/save-file/",
		data: formData,
		method: 'post',
		processData: false, // Два важных параметра. Без них отправляется не корректно
		contentType: false // Два важных параметра. Без них отправляется не корректно
	});

На сервере принимаете массив
$_FILES['myFileName']