带动态预览的Web表单

我拥有的是一个带有12个输入（6个文本输入，3个无线电输入，2个选择下拉输入和1个图像文件输入）的HTML表单（在它自己的DIV中）。带动态预览的Web表单

我想要做的是有第二个DIV包含一个“实时预览”，它将在表格填写时进行更新（即当选择图像文件时，预览DIV更新以显示该图像，然后如果预览DIV将在图像文件顶部显示无线电值）。

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

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

来源

2015-07-10 ljamison

是的JavaScript（或jQuery的，如果你不W¯¯蚂蚁重塑已有的跨浏览器支持的解决方案，especillay为AJAX） –

你能否提供一些基本的样板代码，以便我可以通过JS做到这一点？ – ljamison

你可以在jQuery的官方文档中找到。看看[jQuery.ajax（）]（http://api.jquery.com/jquery.ajax/）。如果你想要掌握jQuery的开发，我建议你把这个网站做成你的朋友。 –

我能够通过执行使用jQuery下面来解决这个问题：

创建一个名为“预览” 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+")"); 
     } 
     } 
    }); 
});

因为我使用的通用代码更新“预览DIV”关于“KEYUP”该元素的所有其他领域：

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

来源

2015-07-18 17:40:20 ljamison

带动态预览的Web表单

回答

相关问题