javascript - 具有动态预览的 Web 表单

Question

我有一个 HTML 表单(在它自己的 DIV 内)，有 12 个输入(6 个文本输入、3 个单选输入、2 个选择下拉输入和 1 个图像文件输入)。

我想要做的是让第二个 DIV 包含一个“实时预览”，它将在填写表单时更新(即当选择图像文件时，预览 DIV 更新以显示该图像，然后如果选中单选按钮，预览 DIV 将在图像文件顶部显示单选值)。

澄清一下:图像文件将显示为其他 11 个输入后面的背景。

这是 Javascript 还是其他语言？我将如何实现？

Answer 1

我能够通过使用 jQuery 执行以下操作来解决此问题:

• 创建一个名为“预览”的 DIV，其中包含每个表单字段的所有子 DIV。
• 将每个 DIV 的 CSS 设置为 position:absolute 并添加一个升序的 z-index 值，这样就不会出现任何倾斜显示。

• 对于图像的“实时预览”，我使用了以下代码:

  $(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+")");
          }
        }
    });
  });
  

• 对于所有其他字段，我使用通用代码为“keyup”上的该元素更新“Preview DIV”:

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