HTML-приложения: файловый ввод-вывод (ч.2)

5. Проверка существования файла
Часто бывает нужно проверить, существует ли на диске файл с указанным путём, перед его открытием или созданием. Для этого мы можем использовать метод FileExists объекта FileSystemObject. В качестве единственного параметра он принимает путь к файлу в виде строки и возвращает true, если файл с этим путём существует, и false в противном случае.

var sFilePath = "c:\\Work\\testfile.txt";

var oTS = null;

if (oFSO.FileExists(sFilePath)) {

  //Файл существует. Открываем его для дозаписи

  oTS = oFSO.OpenTextFile(sFilePath, 8);

} else {

  //Файл не существует. Создаём его

  oTS = oFSO.CreateTextFile(sFilePath);

}

oTS = oFSO.CreateTextFile(sFilePath);
}[/code]

6. Удаление файла
Также часто приходится удалять уже имеющиеся на диске файлы. Для этого применяется метод DeleteFile объекта FileSystemObject. Формат его вызова таков:

[code]<экземпляр объекта FileSystemObject>.DeleteFile(
<путь файла>[,
<удалить ли файл с установленным атрибутом "только для чтения">]
);[/code]
Первым, обязательным, параметром этому методу передаётся путь к удаляемому файлу. Он должен быть представлен в виде строки. В имени файла, присутствующем в этом пути, можно использовать символы-маски * и ?.

Второй, необязательный, параметр указывает, что делать в случае, если удаляемый файл имеет установленный атрибут "только для чтения". Значение true указывает, что следует всё равно удалить такой файл, а значение false - не делать этого. Значение по умолчанию - false (файлы с установленным атрибутом "только для чтения" удаляться не будут).

Метод DeleteFile не возвращает результата.

Примечание:
При вызове метода DeleteFile файл будет удалён безвозвратно, без помещения в Корзину.

При попытке удаления несуществующего файла возникнет ошибка. Поэтому перед удалением файла рекомендуется проверять, существует ли он, с помощью метода FileExists объекта FileSystemObject (см. параграф 5).

[code]oFSO.DeleteFile("c:\\Work\\testfile.txt");[/code]
Удаляем файл testfile.txt из папки Work диска C.

[code]oFSO.DeleteFile("c:\\Work\\*.txt");[/code]
Удаляем все текстовые файлы из той же папки.

[code]oFSO.DeleteFile("c:\\Work\\*.txt", true);[/code]
Удаляем все текстовые файлы из той же папки, в том числе и имеющие установленный атрибут "только для чтения".

[code]var sFilePath = "c:\\Work\\testfile.txt";
if (oFSO.FileExists(sFilePath)) {
//Файл существует. Удаляем его
oFSO.DeleteFile(sFilePath);
}[/code]
А здесь мы проверяем, существует ли файл testfile.txt в папке Work диска C, и, если существует, удаляем его.


7. Как запросить у пользователя имя файла для открытия
Что ж, как выполнять файловый ввод-вывод, мы узнали. Осталась мелочь - выяснить, как запросить у пользователя имя файла для открытия или сохранения.

В Windows-приложениях для запроса имени файла применяются стандартные диалоговые окна открытия и сохранения файла. С их помощью пользователь может, соответственно, указать имя существующего файла для открытия и ввести вручную имя не существующего ещё файла для его создания или выбрать существующий файл для его перезаписи. Все развитые средства разработки предоставляют удобные средства для вызова этих диалоговых окон и работы с ними.

Но, к сожалению, в HTML-приложениях мы не можем вызвать эти окна... Никак - ни через Internet Explorer, ни средствами WSH...

Однако запросить имя уже существующего файла у пользователя для его открытия мы всё-таки можем. Для этого придётся применить обходной путь.

Для запроса имени файла мы создадим диалоговое окно (как это сделать, было описано в предыдущей статье цикла). В этом окне мы поместим особый элемент управления HTML - поле ввода имени файла. Это обычное поле ввода, доступное только для чтения, и кнопка Открыть, при нажатии которой на экране появляется стандартное диалоговое окно открытия файла Windows. Если пользователь выберет в этом окне какой-либо файл и нажмёт кнопку открытия, путь к выбранному файлу появится в поле ввода. Нам останется только отправить данный путь основному окну нашего HTML-приложения.

Обычно поле ввода имени файла применяется для отправки файлов веб-серверу. Но мы нашли ему другое применение.

[code]<FORM>
<P>
Имя файла<BR>
<INPUT TYPE="file" ID="txtFileName">
</P>
</FORM>
. . .
var oTxtFileName = document.getElementById("txtFileName");
window.returnValue = oTxtFileName.value;
window.close();[/code]
Значение file атрибута TYPE тега <INPUT> указывает создать именно поле ввода имени файла.

Любой элемент управления, в том числе и поле ввода имени файла, представляется экземпляром объекта HTMLInputElement. Этот объект поддерживает свойство value, которое, в случае поля ввода имени файла, возвращает путь к файлу, выбранному пользователем.

К сожалению, свойство value доступно только для чтения. Поэтому мы не сможем подставить в поле ввода имени файла в качестве изначального значения уже существующий (например, заданный ранее) путь.


8. Как запросить у пользователя имя файла для сохранения
Но можем ли мы использовать такой же подход, чтобы запросить у пользователя имя файла для сохранения?

К сожалению, поле ввода имени файла позволяет выбирать только файлы, уже существующие на диске. Так что пользователь сможет только перезаписать существующий файл. Ввести имя несуществующего файла, чтобы создать его, он не сможет.

Так что нам придётся использовать для этого другой подход. Самый простой - диалоговое окно с обычным полем ввода, куда пользователь будет должен ввести путь к сохраняемому файлу.


9. HTML-приложение с поддержкой файлового ввода-вывода
Теперь давайте попрактикуемся. Возьмём описанное в предыдущей статье цикла HTML-приложение текстового редактора и добавим ему возможность загружать тексты, хранящиеся в файлах, для правки и сохранять их в файлах. Какую именно версию приложения выбрать - разницы нет; автор выбрал версию, параметры которой задаются в модальном диалоговом окне.

В само HTML-приложение мы добавим кнопки Загрузить и Сохранить. Что они будут делать - понятно сразу.

Код самого HTML-приложения (Textedit_modal.hta) после всех правок будет таким:

[code]<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Текстовый редактор</TITLE>
<HTA:APPLICATION ID="hta1" APPLICATIONNAME="appTextEdit" BORDER="thin"
ICON="Textedit.ico" MAXIMIZEBUTTON="no" SCROLL="no" SELECTION="no"
SINGLEINSTANCE="yes" VERSION="2.0"></HTA:APPLICATION>
<SCRIPT>
window.resizeTo(710, 510);

var bWrap = true;
var sColor = "black";
var sFilePath = "";

function showParameters()
{
var oParams = { wrap: bWrap, color: sColor };
var oResult = window.showModalDialog("options_modal.html", oParams,
"dialogHeight:120px;dialogWidth:200px;scroll:no");
if (oResult != null) {
bWrap = oResult.wrap;
sColor = oResult.color;
var oTxtText = document.getElementById("txtText");
oTxtText.wrap = bWrap ? "soft" : "off";
oTxtText.style.color = sColor;
}
}

function loadFile()
{
var oResult = window.showModalDialog("fileopen.html", null,
"dialogHeight:100px;dialogWidth:240px;scroll:no");
if (oResult != null) {
sFilePath = oResult;
var oFSO = new ActiveXObject("Scripting.FileSystemObject");
var oTS = oFSO.OpenTextFile(sFilePath, 1);
var oTxtText = document.getElementById("txtText");
oTxtText.value = oTS.ReadAll();
oTS.Close();
}
}

function saveFile()
{
if (sFilePath == "") {
var oResult = window.showModalDialog("filesave.html", null,
"dialogHeight:100px;dialogWidth:240px;scroll:no");
if ((oResult != null) && (oResult != ""))
sFilePath = oResult;
}
if (sFilePath != "") {
var oFSO = new ActiveXObject("Scripting.FileSystemObject");
var oTS = oFSO.OpenTextFile(sFilePath, 2, true);
var oTxtText = document.getElementById("txtText");
oTS.Write(oTxtText.value);
oTS.Close();
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TEXTAREA ID="txtText" COLS="80" ROWS="30"></TEXTAREA>
<BR>
<INPUT TYPE="button" VALUE="Параметры" ONCLICK="showParameters();">
<BR>
<INPUT TYPE="button" VALUE="Загрузить" ONCLICK="loadFile();">
<INPUT TYPE="button" VALUE="Сохранить" ONCLICK="saveFile();">
</FORM>
</BODY>
</HTML>[/code]
Дадим пояснения только к тем фрагментам кода, что мы добавили здесь.

Прежде всего, мы объявили глобальную переменную sFilePath. В ней будет храниться путь последнего загруженного или сохранённого файла. Зачем это нужно, мы узнаем потом.

При нажатии кнопки Загрузить будет вызвана функция loadFile. Она выведет на экран диалоговое окно Открытие файла, где пользователь должен будет выбрать открываемый файл. (Мы создадим это окно позже.) Путь к выбранному пользователем файлу будет передан основному окну приложения.

Когда диалоговое окно Открытие файла закроется, мы проверим, выбрал ли в нём пользователь открываемый файл. Если это так, мы получаем путь к нему и сразу же сохраняем его в объявленной ранее глобальной переменной sFilePath. После этого мы загружаем содержимое этого файла и помещаем его в область редактирования, где выполняется правка текста. При этом, чтобы загрузить сразу всё содержимое файла, мы используем метод ReadAll объекта TextStream.

Область редактирования представляется в виде экземпляра объекта HTMLTextAreaElement. Этот объект поддерживает свойство value, хранящее содержимое этой области редактирования - находящийся в нём текст.

При нажатии кнопки Сохранить будет вызвана функция saveFile. В ней сначала выполняется проверка, содержит ли переменная sFilePath какой-либо путь к файлу. Вспомним - при открытии любого файла путь к нему сохраняется в этой переменной; кроме того, как мы вскоре узнаем, там же сохраняется путь к сохраняемому файлу при первом сохранении введённого пользователем текста. Если же в переменной sFilePath никакого пути не хранится, мы вызываем диалоговое окно Сохранение файла, где пользователь сможет указать путь к сохраняемому файлу, и, если он его указал, сохраняем его в этой переменной. (Это окно мы также создадим потом.)

Как правило, пользователь после открытия файла и правки его содержимого сохраняет это самое исправленное содержимое в том же файле. Аналогично, после сохранения набранного "с нуля" текста в файле пользователь сохраняет последующие изменения в том же файле. Поэтому мы храним путь к открытому или сохранённому ранее файлу в специальной переменной (sFilePath), чтобы не запрашивать этот путь у пользователя снова и снова при каждом последующем сохранении.

Далее мы снова проверяем, хранит ли переменная sFilePath путь, и, если хранит, сохраняем содержимое области редактирования в файле с этим путём. Обратим внимание, что при открытии файла на запись мы указываем, чтобы он был перезаписан. А для сохранения сразу всего содержимого области редактирования используем метод Write объекта TextStream.

Теперь создадим веб-страницу, реализующую диалоговое окно Открытие файла. На ней будут присутствовать поле ввода имени файла Имя файла и кнопки ОК и Отмена.

Код этой веб-страницы приведён ниже.

[code]<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Открытие файла</TITLE>
<SCRIPT>
function sendParams()
{
var oTxtFileName = document.getElementById("txtFileName");
window.returnValue = oTxtFileName.value;
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<P>
Имя файла<BR>
<INPUT TYPE="file" ID="txtFileName">
</P>
<P>
<INPUT TYPE="button" VALUE="ОК" ONCLICK="sendParams();">
<INPUT TYPE="button" VALUE="Отмена" ONCLICK="window.close();">
</P>
</FORM>
</BODY>
</HTML>[/code]
Комментировать здесь абсолютно нечего. Во-первых, код очень простой, а во-вторых, всё нам уже знакомо по предыдущей статье цикла, посвящённой диалоговым окнам.

Сохраним эту веб-страницу в файле с именем fileopen.html.

Осталось создать веб-страницу, реализующую диалоговое окно Сохранение файла. Поместим на ней обычное поле ввода Имя файла и неизменные кнопки ОК и Отмена.

Код этой веб-страницы приведён ниже.

[code]<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Сохранение файла</TITLE>
<SCRIPT>
function sendParams()
{
var oTxtFileName = document.getElementById("txtFileName");
window.returnValue = oTxtFileName.value;
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<P>
Имя файла<BR>
<INPUT TYPE="text" ID="txtFileName">
</P>
<P>
<INPUT TYPE="button" VALUE="ОК" ONCLICK="sendParams();">
<INPUT TYPE="button" VALUE="Отмена" ONCLICK="window.close();">
</P>
</FORM>
</BODY>
</HTML>[/code]
Здесь тоже нечего комментировать. Сохраним эту веб-страницу в файле filesave.html. Осталось только проверить наше новое HTML-приложение в действии.


Дополнительные материалы

• Статья о поле ввода имени файла
• Статья о свойстве value поля ввода имени файла
• Статья о свойстве value области редактирования