МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное бюджетное образовательное

учреждение высшего образования
«Тихоокеанский государственный университет»

Кафедра
«Автоматика и Системотехника»

Лабораторная работа №10

по курсу «Архитектура информационных систем»
Тема: AJAX-запрос с передачей файла методами объекта
XMLHttpRequest2

Выполнил: студент группы

ИС(аб)-71 Белим Л.В.

Проверил:
Конопелько Г.К.
 г. Хабаровск
2020 г.
Лабораторная работа №10
AJAX-запрос с передачей файла методами объекта
XMLHttpRequest2
Цель работы: ознакомление с основными компонентами Ajax, организация
запроса и обработка ответа на HTML странице.
Задание:
1. Сделать форму с элементом выбора файла и кнопкой в центральной части
страницы. Имена HTML-файлов и файлов Perl-скриптов должны
содержать русские буквы.
2. Используя методы объекта XMLHttpRequest2, обеспечить передачу
выбранного файла-картинки частями со сборкой его на сервере.
3. Файл-картинку сохранить на сервере, оставив имя файла без изменения.
4. HTML-файлы и Perl-скрипты должны формировать ответ браузеру в виде
картинки и текста, включающего русские буквы. Ответ должен
отображаться в центральной части HTML-страницы.

Ход работы:
файл index.html /home/var/www/html/is1-02/Labs/index.html
<form id="form4">
<div style="padding: 2%;"><label>Л/р №10 (AJAX)</label>
<label for="Name4">Имя:</label>
<input type="text" name="Name10" id="Name4"><br>

<label for="Year10">Год поступления:</label>

<input type="number" name="Year10" id="Year10" ><br>
<input type="file" accept="image/*" name="filefield" id="filefield" onchange
="AjaxImage()" class="ButtonSumbit"></div>

</div> </form>ajax89.js /home/var/www/html/ is1_02/Labs/ script/ajax89.js

function AjaxImage()
{ var getfile = document.getElementById('filefield');
var file = getfile.files[0];
var formData = new FormData();
formData.append('file', file);

var oXmlHttp=createRequest()
oXmlHttp.open("POST", "/Тест10Белим.pl", true);
oXmlHttp.setRequestHeader("Content-Type", "text/html; charset=utf-8");

oXmlHttp.onreadystatechange = function()
{
if (oXmlHttp.readyState == 4) Лист
Лабораторная работа №10
ТОГУ, ИС(аб)-71, Белим Л.В.
по курсу АИС 4
 { if (oXmlHttp.status == 200)
{
alert("загруженно успешно");
document.getElementById('DivForAjax').innerHTML =
oXmlHttp.responseText;
}
else
{
alert(oXmlHttp.status+ '::'+oXmlHttp.statusText);
}
}
}
oXmlHttp.send(formData);
var r_args = "&Name10=" +
encodeURIComponent(document.getElementById("form4").Name10.value) +

"&Year10=" +
encodeURIComponent(document.getElementById("form4").Year10.value) ;

SendRequest("post", r_args, "../../../Тест10lida.pl", print_10, "false", "");

}
Все использованные функции были описаны в лабораторной работе №9

Тест10Белим.pl /home/var/www/html/ Тест10Белим.pl

#!/usr/bin/perl
require("cgi-lib.pl");
print &PrintHeader;

if(read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}) != 0)

{
print "Файл успешно прочитан! <br> Ожидайте окончания загрузки <br>";

@request_content = split(/\n/, $buffer, 5);

($_, $_, $filename) = split(/;/, $request_content[1], 3);
($_, $filename, $_) = split(/"/, $filename, 3);
($file_data, $_) = split(/\n------WebKitFormBoundary/,$request_content[4],2);

open($file_descriptor, ">", "/home/var/www/html/is1_02/Labs/".$filename);

binmode($file_descriptor);
print $file_descriptor $file_data;
close($file_descriptor);

$path="'files/".$filename."'";

print("<img src=/is1_02/Labs/".$filename." width='30%' height='30%'>" );

print "<br> Файл $filename загружен!"; Лист

Лабораторная работа №10
ТОГУ, ИС(аб)-71, Белим Л.В.
по курсу АИС 4
 }

else
{print "Файл не прочитан! <br> Повторите отправку файла";}

Тест10lida.pl /home/var/www/html/ Тест10Белим.pl

#!/usr/bin/perl
require("cgi-lib.pl");
use utf8;
use Encode qw(decode encode);
print "Content-type: text/html\n\n";
$buffer = $ENV{'QUERY_STRING'};
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split("&", $buffer);
foreach $pair (@pairs) {
($name, $value) = split("=", $pair);
$value =~ tr/+/ /;
$value =~ s/%(..)/pack("c", hex($1))/ge;
$parameter{$name} = decode('UTF-8',$value);
}
print "
<label>
<br><strong>Имя</strong>: $parameter{'Name10'}
</label>
<label>
<br><strong>Год поступления в университет</strong>:
$parameter{'Year10'}
</label>"
Вывод: Выполняя данную лабораторную работу, я с основными
компонентами Ajax, организация запроса и обработка ответа на HTML странице.

Замечание: Картинку с текстом надо отправлять спец. кнопкой, но не

кнопкой ее выбора.
Реализация: <div style="padding: 1%;"><label>Л/р №10 (AJAX)</label><br>
<label for="Name4">Имя:</label>
<input type="text" name="Name10" id="Name4">

<label for="Year10">Год поступления:</label>

<input type="number" name="Year10" id="Year10" ><br>
<input type="file" accept="image/*" name="filefield" id="filefield"
class="ButtonSumbit">
<input type="button" value="Отправить" class="ButtonSumbit"
onclick="AjaxImage()">
</div>
Лист
Лабораторная работа №10
ТОГУ, ИС(аб)-71, Белим Л.В.
по курсу АИС 4