 | Уровень сложности: средний Тайлер Андерсон, независимый автор,
Stexar Corp.
09.07.2007 Загрузка файлов - довольно распространенная задача при использовании HTML-форм, но как это сделать в XForms, где данные сохраняются как часть XML-документа? Эта статья объясняет, как создать форму XForms, которая дает возможность пользователю загрузить файл и как создать код PHP, который сохраняет файл на сервере, когда он приходит.
Прежде, чем вы начнете: замечания по этой статье
Этот совет создан для конкретной задачи. Для дополнительной информации по XForms читайте цикл из трех статей Введение в XForms.
Примеры XForms, описанные в данной статье, протестированы и работают с браузерами Firefox 1.5 (с установленным расширением XForms) и Microsoft® Internet Explorer 6 с установленным элементом управления Formsplayer. Раздел Загрузка содержит XHTML-файл для Firefox и HTML-файл для IE.
Данные
При работе с формой XForms, первый шаг - это определить структуру данных, с которыми мы работаем. Изучите пример XML-документа, который отслеживает предметы, приобретенные на аукционе, и содержит элемент, в котором хранится фотография (см. листинг 1).
Листинг 1. Данные
<auctionItems xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<auctionItem itemID="2">
<purchaseDate>2006-09-18</purchaseDate>
<auctionLength>600</auctionLength>
<purchasePrice>10</purchasePrice>
<description>Vintage hair dryer</description>
<estimatedValue>N/A</estimatedValue>
<imageFile xsi:type="xsd:base64Binary" fileName="image2.jpg"/>
</auctionItem>
<auctionItem itemID="5">
...
</auctionItem>
</auctionItems>
|
Важная часть данного экземпляра документа - это элемент imageFile, который будет хранить данные, представляющие файл с рисунком, после того, как пользователь его подтвердит. Этот элемент указывает, что данные, которые он содержит - это данные Base64Binary. Base64 предоставляет способ кодирования двоичных данных в текст с тем, чтобы он мог быть включен в XML-документ. Когда документ дойдет до адреса назначения (в данном случае - это Web-сервер), вы можете декодировать Base64, чтобы получить исходные двоичные данные. Это делает его идеальным для передачи файлов изображений.
Но как это сделать на форме?
Добавление элемента управления upload к форме
XForms предусматривает элемент управления upload, поэтому добавить эту возможность к форме совершенно просто (см. листинг 2).
Листинг 2. Добавление элемента управления upload
<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>Instance Data-To-XHTML/XForms Example</title>
<xforms:model id="auctionItems">
<xforms:instance src="auctions.xml"/>
<xforms:submission id="submit_model_auctionItems"
action="http://xformstest.org/cgi-bin/showinstance.sh"
method="post"/>
</xforms:model>
<link href="gen_default.css" rel="stylesheet"/>
</head>
<body>
<h1 align="center">Auction Item Inventory</h1>
<xforms:repeat nodeset="auctionItem" id="repeatAuctionItems">
<h2 align="center">Auction Item</h2>
<xforms:input ref="@itemID">
<xforms:label>Item ID</xforms:label>
</xforms:input>
<xforms:input ref="purchaseDate">
<xforms:label>Purchase Date</xforms:label>
</xforms:input>
<xforms:input ref="auctionLength">
<xforms:label>Auction Length</xforms:label>
</xforms:input>
<xforms:input ref="purchasePrice">
<xforms:label>Purchase Price</xforms:label>
</xforms:input>
<xforms:input ref="description">
<xforms:label>Description</xforms:label>
</xforms:input>
<xforms:input ref="estimatedValue">
<xforms:label>Estimated Value</xforms:label>
</xforms:input>
<xforms:upload ref="imageFile">
<xforms:label>Upload Data File</xforms:label>
</xforms:upload>
</xforms:repeat>
<xforms:group>
<xforms:trigger>
<xforms:label>Insert Auction Item</xforms:label>
<xforms:insert nodeset="auctionItem" at="index('repeatAuctionItems')"
position="after" ev:event="DOMActivate" />
</xforms:trigger>
<xforms:trigger>
<xforms:label>Delete Auction Item</xforms:label>
<xforms:delete nodeset="auctionItem" at="index('repeatAuctionItems')"
ev:event="DOMActivate" />
</xforms:trigger>
</xforms:group>
<xforms:submit submission="submit_model_auctionItems">
<xforms:label>Submit</xforms:label>
</xforms:submit>
</body>
</html>
|
Элемент управления upload предоставляет способ задания файла для загрузки, как мы можем видеть на рисунке 1.
Рисунок 1. Элемент управления upload предоставляет способ задания файла для загрузки
Как указано атрибутом ref, данные сохраняются в элементе imageFile. Если вы подтвердите форму, вы увидите текстовое представление, как показано на рисунке 2.
Рисунок 2. Текстовое представление
Но как вы извлечете данные, когда они придут на сервер?
Извлечение данных
Извлечение данных в PHP - это вопрос анализа XML документа, возвращенного формой, как можно видеть из листинга 3.
Листинг 3. Извлечение файла
<?php
if (!isset($HTTP_RAW_POST_DATA))
$HTTP_RAW_POST_DATA = file_get_contents("php://input");
$doc = new DOMDocument();
$doc->loadXML($HTTP_RAW_POST_DATA);
$imageFiles = $doc->getElementsByTagName('imageFile');
header("Content-type: text/html");
for($i = 0; $i < $imageFiles->length; $i++){
$imageFileData = $imageFiles->item($i);
if
(strlen($imageFileData->nodeValue) >0){
$filename = $imageFileData->getAttribute('fileName');
print "Saving ".$filename."<br />";
$fh = fopen($filename, 'w');
fwrite($fh, base64_decode($imageFiles->item(0)->nodeValue));
fclose($fh);
print "<img src='".$filename."' width='200' />";
}
}
print "<br />Done.";
?>
|
Первый шаг совершенно простой: во-первых, вы извлекаете присланные исходные данные, а затем анализируете их как документ DOM, как вы поступили бы с любой другой строкой. Отсюда вы можете извлечь элементы imageFile.
Теперь будет несколько сложнее. Во-первых, вы выводите заголовок Content-type не для файла, а для всего ответа, отсылаемого обратно в браузер. Таким образом, вы можете видеть, что происходит. Далее вы просматриваете каждый из элементов imageFile. Эти элементы существуют независимо от того, содержатся ли в них данные - таким же образом вы создали экземпляр документа - поэтому они будут присутствовать, даже если не содержат никаких данных. По этой причине вы проверяете, есть ли в них действительно какие-либо данные, и если есть - то обрабатываете их.
Эта обработка состоит из извлечения имени файла и использовании его для открытия нового файла; после того, как файл открыт, вы не можете просто вывести содержимое элемента imageFile, так как это не бинарные файлы, которых вы ожидаете. Это текст, закодированный в Base64, поэтому вам надо декодировать их перед сохранением.
Файл сохранен в текущем каталоге, поэтому вы также можете создать тег, чтобы видеть его. Если вы теперь подтвердите форму, она должна выглядеть как рисунок 3.
Рисунок 3. Просмотр файла
Заключение
Подобно традиционным Web-формам, XForms предоставляет возможность загрузки фалов, однако данные хранятся в Base64, поэтому вам надо декодировать их, перед тем как что-либо с ними делать. Однако как только вы это сделали, вы можете просто сохранить файл на локальной машине и отослать обратно пользователю, если хотите.
Загрузка | Описание | Имя | Размер | Метод загрузки |
|---|
| Примеры для загрузки в PHP при помощи XForms | php_source.zip | 4KB | HTTP |
|---|
Ресурсы Научиться
Получить продукты и технологии
-
Получите MozzIE, элемент управления с открытым кодом, который позволяет вам визуализировать XForms в IE.
Обсудить
Об авторе | | | No bio. |
Выскажите мнение об этой странице
| |
