Обработка событий диалога FileChooserDialog

Ранее обработка событий была необязательной для диалога FileChooserDialog (вызываемый браузером Gnome диалог GtkFileChooserDialog), так как метод input.click() блокировал исполнение скрипта до нажатия одной из управляющих кнопок в диалоге, таких как "Открыть" или "Отмена". Поэтому ниже представленный код в листинге 1 был актуальным.

Листинг 1

     /*Форма управления для вызова диалога выбора файла */ 
     <form id="form-filedialog-id" >
     	<input type="button"  onclick="showFileDialogVariantOne()">
	<input id="input-text-id" type="text">
     	            . . . 
     </form>	           
     	            . . . 
 showFileDialogVariantOne = function() {
   var inputText = document.getElementById("input-text-id"); 

/* Создание элемента INPUT, а тип "file" позволит вызвать FileChooserDialog */
   var input = document.createElement("input"); 
   input.type = "file"; 
   input.style.margin = "5px";
   input.style.visibility="hidden"; 
   document.getElementById("form-filedialog-id").appendChild(input);

/* Создание элемента INPUT, вызов FileChooserDialog */
   input.click(); 
   /* включение обработки события OnChange */
   if( checkbox.checked == true ) { 
       input.onchange = function() {
/* Эта проверка на первый взгляд излишняя, но необходима в случае 
   изменения правил обработки события OnChange после нажатия 
   кнопки "Отмена" в FileChooserDialog */ 
         if( this.value.length ) {
	        filename.value = this.files[0].name;
         }
       }
   }
  /* определение отмены выбора файла и его ввода */
   if( input.value.length == 0 ) {
      inputText.value = "Файл не выбран!";
      inputText.disabled = false;
   }else{
      inputText.value = this.files[0].name;
      inputText.disabled = false;		     	
   }
 }

Форма 1

Сегодня, если не включать обработку события ОnСhange результат работы Формы 1 будет очевидным. При нажатии любой кнопки в диалоге FileChooserDialog в её текстовом поле будет напечатано: "Файл не выбран!". В обратном случае, после нажатия в нем кнопки "Открыть" в текстовом поле Формы 1 будет напечатан выбранный файл.

Перехват нажатия кнопки Отмена во-многих браузерах не реализовано. Поэтому необходимо ввести кнопку "Submit", которая будет появляться в форме 2 после фактического выбора файла в FileChooserDialog, тем самым будем квитировать событие ОnСhange, как показано в листинге 2

Листинг 2


  <form id="form-filedialog-id" >
     	<input type="button"  onclick="showFileDialogVariantTwo()">
	<input id="input-text-id" type="text"  >
     	            . . . 
  </form>	
     	            . . . 
  function showFileDialogVariantTwo() {
     var now = new Date();	
     var filename = document.getElementById("input-text-two-id"); 
     var pSubmit = document.getElementById("p-submit-two-id");
     var status = document.getElementById("status-submit-two-id");

/* Создание элемента INPUT, а тип "file" позволит вызвать FileChooserDialog */
     var input = document.createElement("input");
     input.type          = "file"; 
     input.style.margin  = "0px"; 
     input.style.height  = "0px";
     input.style.display = "none";
     document.getElementById("form-filedialog-two-id").appendChild(input);	 
 
/* после нажатия кнопки "Открыть" в FileChooserDialog наступит событие OnChange */
     input.onchange = function() {
     /* определение отмены выбора файла и его ввода */
       if ( this.value.length > 0 ) { 
	   filename.value = this.files[0].name;
           pSubmit.style.display = "inline";
           if( status ) status.style.display = "inline";
/* При нажатии кнопки "Submit" печатаем в форме сообщение, что идет загрузка 
   файла. */ 
           pSubmit.click ( function() {
                              this.style.display = "none";          
                              status.innerHTML = "Идет загрузка файла...";
                           })     
       }
       document.getElementById("button-openfile-id").style.visibility = "hidden";
     };

/* При вызове диалога в текстовом поле печатем, что файл не выбран после 
   нажатия пользователем кнопки "Отмена" в FileChooserDialog */ 
     input.onclick = function() { 
	filename.value = "Файл не выбран!";	
     };
     
/* Вызов FileChooserDialog */
     input.click(); 	
  }

Форма 2

Библиография: MDN.FileList; MDN.Element Input