`
s471417811
  • 浏览: 56451 次
社区版块
存档分类
最新评论

使用JS相应事件以及动态创建对象控件

    博客分类:
  • .net
阅读更多
今天做项目的时候遇到一个比较纠结的问题,在后台上传图片的时候,如果上传多张图的话,并且产生相应的缩略图,在不刷新页面的情况下怎么办。

想到这点马上就想到了JS了,可以用JS获取 上传之后存放图片地址的文本框的 “内容被改变事件也就是onpropertychange事件来达到目的”

思路(注意上传时用的第三方控件,无法对其中的按钮来做事件响应):当图片上传后,图片的地址是被隐藏在一个text中的,当上传完成,并在text中写入上传后的地址时,就会触发onpropertychange事件,那我们就在onpropertychange事件中做文章。在onpropertychange事件被触发时,我们就获取路径集合,分割路径,然后动态创建img对象。

以下是测试代码,复制到任意文本,并将后缀改为.html可用

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txt2" runat="server"></asp:TextBox>
<p>结果:</p> 
    <div id="image"></div>
    <asp:TextBox ID="txt" runat="server"></asp:TextBox>
    <input type="button" id="btn"></input>
    
    </form>
    
    <script type="text/javascript"> 
        var $ = function(o) { 
        return document.getElementById(o) 
        }; 

        $('txt2').onpropertychange = function() { 
            $('txt').value = this.value; 
            $('abc').src = "images/JD1.jpg";
        } 

        $('btn').onclick = function() { 
            var imgID = new Image(); 
            imgID.src = "images/JD2.jpg"; 
            document.getElementById("image").innerHTML = "<img src="+imgID.src+" />"; 
        } 
    </script>
</body>
</html>
分享到:
评论

相关推荐

    动态创建不同的控件资源

    本篇将深入探讨如何实现动态创建控件以及其在实际应用中的价值。 动态创建控件的主要优势在于它能够使程序更具可扩展性和适应性。例如,在一个数据量可变的表格应用中,用户可能希望在加载数据时自动创建与数据行数...

    JS树型多列表动态生成改变控件

    在JavaScript编程中,树型多列表动态生成是一种常见的交互式用户界面设计,它允许用户以层级结构查看和操作...通过以上这些技术,我们可以构建出一个高效、易用的JS树型多列表动态生成改变控件,提供良好的用户体验。

    html js脚本日历控件

    在JavaScript中,创建一个日历控件主要涉及到DOM操作、事件处理和一些基本的CSS样式设计。下面我们将详细探讨这些知识点: 1. **DOM操作**:HTML文档对象模型(DOM)是HTML和XML文档的编程接口。在JavaScript中,...

    js 日历控件 calendar 漂亮日历控件

    3. **JavaScript初始化**:在页面加载时,使用JavaScript初始化日历控件,这可能包括设置初始日期、创建日历UI元素以及添加事件监听器。 4. **事件处理**:当用户点击年份、月份选择器或日期单元格时,我们需要监听...

    js日期时间控件 JavaScriptjs日期时间控件 jsp

    - 控件的实现涉及到DOM操作,事件处理,以及`Date`对象的使用。例如,点击按钮时,可以用JavaScript动态创建并显示一个日期选择面板,用户选择后更新文本框的值。 - 可以使用现有的开源库,如`jQuery UI ...

    js+css控件

    总的来说,这个时间控件的使用涉及到了前端开发的基本技术,包括JavaScript事件处理、DOM操作、时间和日期处理,以及CSS样式设计和响应式布局。开发者可以通过学习和使用这个控件,提升自己在这些领域的技能,并快速...

    JS非常好用的日期选择控件

    本资源提供的日期选择控件应该附带了详细的使用指南,包括如何引入控件、初始化、设置属性(如默认日期、日期范围限制)、调用方法(如打开日历、获取选中日期)以及如何响应用户操作(如点击事件、改变事件)等。...

    js 时间控件 javascript

    总结,JavaScript时间控件是网页交互中的重要组成部分,通过结合DOM操作、事件处理、日期对象以及第三方库,我们可以构建出功能强大、易用且符合用户习惯的时间选择工具。在开发过程中,考虑可访问性、国际化和性能...

    WebCalendar网页日历控件(js,javascript)

    在JavaScript的世界里,WebCalendar控件的实现依赖于对DOM(文档对象模型)的理解和熟练使用,通过操纵HTML元素来显示和更新日期。JavaScript是一种轻量级的解释型编程语言,常用于网页的动态效果和交互功能的实现。...

    省市联动控件JS控件

    在本文中,我们将详细探讨这种控件的工作原理、使用方法以及它在实际开发中的应用。 1. **工作原理**: 省市级联动控件基于JavaScript语言实现,通过DOM操作动态更新下拉菜单,当用户在省或市的选项中做出选择时,...

    很好用得js日期控件

    - **JavaScript Date对象**:JavaScript内置的Date对象是处理日期和时间的基础,它可以创建、操作和格式化日期。但是,JavaScript的标准日期选择器功能有限,往往需要额外的库来增强用户体验。 2. **为什么需要js...

    js树型控件(附源码)

    这个"js树型控件"资源是学习和实践JavaScript UI开发的一个良好实例,通过分析和使用这个控件,开发者可以深入理解JavaScript在构建动态、交互式界面方面的能力。同时,它也为实现自定义的树型控件提供了参考和灵感...

    .js带时间的日期控件

    JavaScript是一种广泛应用于网页和应用程序开发的脚本语言,它的灵活性和强大的功能使得它在处理用户交互、动态内容和数据操作方面表现出色。在前端开发中,日期和时间控件是必不可少的元素,它们通常用于日历选择、...

    一个js写的日历控件

    在IT行业中,JavaScript(简称JS)是一种广泛使用的前端编程语言,尤其在网页交互和动态效果的实现上。在这个场景中,我们讨论的是一个用JS编写的日历控件,其目的是为了帮助用户在预订酒店时方便地选择入住日期和离...

    JS 下拉框树型控件.rar

    在JavaScript(JS)开发中,下拉框树型控件是一种常见的交互元素,它结合了传统的下拉框和树形结构,通常用于显示层级关系的数据。这种控件在用户界面设计中非常有用,例如在选择组织结构、地区层级或者分类时。在本...

    js实现的datetime控件

    **插件使用**:在提供的文件列表中,`WdatePicker.js`可能是第三方日期时间选择插件的实现,如WdatePicker是基于JavaScript的日期时间选择器,它提供了一套完整的日期时间选择功能,包括日、月、年、时、分、秒的...

    js日历控件日期多选Kalendajs

    JavaScript(简称JS)是一种广泛用于客户端Web开发的脚本语言,它在网页中常用于处理用户的交互、操作DOM(文档对象模型)、以及实现各种动态效果。在这个场景中,"js日历控件日期多选Kalendajs" 提供了一种功能强大...

    javascript 日期控件

    开发者可能会使用这个对象来初始化日期控件的默认值,以及处理用户选择日期时的事件。例如,当用户点击日期选择器时,一个弹出的日历视图可能会被显示出来,用户可以选择一个日期,然后JavaScript会更新HTML页面上的...

    js ie firefox 日历控件多多

    在JavaScript的世界里,日历控件是网页交互中常见的组件之一,主要用于用户输入日期或选择日期。...开发者可以根据项目需求,选择适合的控件并进行相应的定制,以创建出既美观又实用的日期选择功能。

    Calendar(JS日历控件)

    JavaScript,作为网页开发的主要脚本语言,提供了丰富的库和自定义方法来创建动态和用户友好的日历控件。"Calendar(JS日历控件)"正是这样一个利用JavaScript实现的日历插件,旨在简化日期选择的过程,提高用户体验...

Global site tag (gtag.js) - Google Analytics