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”上更新该元素的“预览DIV”：

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

具有动态预览的Web表单

1 个答案: