Веб-форма с динамическим предварительным просмотром

Question

У меня есть HTML-форма (внутри ее собственной DIV) с 12 входами (6 текстовых входов, 3 радиовхода, 2 выбора выпадающих входов и 1 вход файла изображения).

Что я хочу сделать, так это иметь второй DIV, чтобы содержать «живой предварительный просмотр», который будет обновляться по мере заполнения формы (т. Е. Когда для файла изображения выбраны предварительные обновления DIV для отображения этого изображения, а затем if выбирается радиокнопка, предпросмотр DIV отображает значение радио поверх файла изображения).

Для уточнения: файл изображения будет отображаться как фон за другими 11 входами.

Будет ли это Javascript или другим языком? И как бы это реализовать?

Answer 1

Я был в состоянии решить эту проблему, выполнив следующие действия с помощью JQuery:

• создать DIV под названием «Предварительный просмотр», который содержал все вложенные DIVs для каждого поля формы.
• устанавливает CSS для каждого DIV как позицию: абсолютный и добавляет возрастающее значение z-индекса, чтобы ничто не отображалось искаженным.

• Для «живого просмотра» образа, я использовал следующий код:

  $(function() { 
      $("#uploadFile").on("change", function() 
      { 
       var files = !!this.files ? this.files : []; 
      if (!files.length || !window.FileReader) return; // no file selected 
  
      if (/^image/.test(files[0].type)){ // only image file 
       var reader = new FileReader(); // instance of the FileReader 
       reader.readAsDataURL(files[0]); // read the local file 
  
       reader.onloadend = function(){ // set image data as background of div 
       $("#PreviewDIV").css("background-image", "url("+this.result+")"); 
       } 
       } 
      }); 
  }); 
  

• Для всех остальных полей, которые я использовал общий код для обновления «Предварительный просмотр DIV» для этого элемента на «KeyUp»:

  $(function(){ 
   
      $('#textboxID').keyup(function(){ 
   
       $('#PreviewID').text($(this).val()); 
   
      }); 
   
  });