- 浏览: 56451 次
最新评论
今天做项目的时候遇到一个比较纠结的问题,在后台上传图片的时候,如果上传多张图的话,并且产生相应的缩略图,在不刷新页面的情况下怎么办。
想到这点马上就想到了JS了,可以用JS获取 上传之后存放图片地址的文本框的 “内容被改变事件也就是onpropertychange事件来达到目的”
思路(注意上传时用的第三方控件,无法对其中的按钮来做事件响应):当图片上传后,图片的地址是被隐藏在一个text中的,当上传完成,并在text中写入上传后的地址时,就会触发onpropertychange事件,那我们就在onpropertychange事件中做文章。在onpropertychange事件被触发时,我们就获取路径集合,分割路径,然后动态创建img对象。
以下是测试代码,复制到任意文本,并将后缀改为.html可用
想到这点马上就想到了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>
发表评论
-
网页flv播放器JW FLV PLAYER 说明(转)
2012-07-11 17:59 1021JW FLV PLAYER 在线FLV播放器中文使用说明 2 ... -
安装VisualSVN Server过程中出现错误,无法启动VisualSVN服务
2012-06-08 14:26 1550安装VisualSVN Server过程中出现错误,无 ... -
SVN服务器搭建和使用(三)
2012-06-07 17:10 858SVN服务器搭建和使用( ... -
SVN服务器搭建和使用(二)
2012-06-07 17:10 896SVN服务器搭建和使用(二) 上一篇介绍了Vi ... -
SVN服务器搭建和使用(一)
2012-06-07 17:09 1064SVN服务器搭建和使用(一) Subversio ... -
在.net的绑定事件中使用if控制语句
2012-05-22 10:53 2059做项目中经常会遇到的一个问题,在Repeater中绑定了某个数 ... -
asp.net 2.0 treeview点击相应的父节点文本展开子节点而不是点前面的加号才能打开
2012-05-14 12:04 3447在要点击展开的父节点上设置:SelectAction为Expa ... -
ASP.NET获取当前时间
2012-05-07 10:31 2934在c# / ASP.net中我们可以 ... -
让iframe的height=100%在IE7、8中正常显示
2012-04-17 22:33 1636具体原因不明,在载入的时候改变他的高度为用户区的高度即可,在i ... -
JS确定取消控制是否删除的方法
2012-04-12 15:32 1116<script language="jav ... -
JS与Asp.Net的相互取值
2012-04-12 14:58 2717JS中取得Asp.Net的值 (1)取得服务端控件的值 va ... -
js数组操作大全(转)
2012-04-12 14:52 24921shift:删除原数组第一项,并返回删除元素的值;如果数组为空 ... -
在Repeater 中绑定 DropDownList
2012-03-29 17:00 1117理论上下面这段代码可行的,结果却怎么也显示不出来,找了半天,发 ... -
点击repeater里面的按钮获取本行里面其他列中的数据
2012-03-29 14:33 3814今天在做一个 后台列表修改的功能时遇到一个问题。 我要实现的功 ... -
在asp.net中动态生成web控件
2012-03-28 23:22 1111大多数情况下,我们在制作asp.net页面的时 ... -
c#动态生成文字图片解决方案
2012-03-28 09:06 1030今天网上看到一篇文章,可以动态生成文字图片的,还没验证过,先记 ... -
.net弹出对话框
2012-03-27 13:07 925今天在网上看到一篇.net弹出对话框的文章,感觉这个类不错,记 ... -
直接使用VS2008中的SQL2005
2012-03-27 09:31 1046这两天公司换了台电脑,装了VS2008后准备装SQL2 ...
相关推荐
本篇将深入探讨如何实现动态创建控件以及其在实际应用中的价值。 动态创建控件的主要优势在于它能够使程序更具可扩展性和适应性。例如,在一个数据量可变的表格应用中,用户可能希望在加载数据时自动创建与数据行数...
在JavaScript编程中,树型多列表动态生成是一种常见的交互式用户界面设计,它允许用户以层级结构查看和操作...通过以上这些技术,我们可以构建出一个高效、易用的JS树型多列表动态生成改变控件,提供良好的用户体验。
在JavaScript中,创建一个日历控件主要涉及到DOM操作、事件处理和一些基本的CSS样式设计。下面我们将详细探讨这些知识点: 1. **DOM操作**:HTML文档对象模型(DOM)是HTML和XML文档的编程接口。在JavaScript中,...
3. **JavaScript初始化**:在页面加载时,使用JavaScript初始化日历控件,这可能包括设置初始日期、创建日历UI元素以及添加事件监听器。 4. **事件处理**:当用户点击年份、月份选择器或日期单元格时,我们需要监听...
- 控件的实现涉及到DOM操作,事件处理,以及`Date`对象的使用。例如,点击按钮时,可以用JavaScript动态创建并显示一个日期选择面板,用户选择后更新文本框的值。 - 可以使用现有的开源库,如`jQuery UI ...
总的来说,这个时间控件的使用涉及到了前端开发的基本技术,包括JavaScript事件处理、DOM操作、时间和日期处理,以及CSS样式设计和响应式布局。开发者可以通过学习和使用这个控件,提升自己在这些领域的技能,并快速...
本资源提供的日期选择控件应该附带了详细的使用指南,包括如何引入控件、初始化、设置属性(如默认日期、日期范围限制)、调用方法(如打开日历、获取选中日期)以及如何响应用户操作(如点击事件、改变事件)等。...
总结,JavaScript时间控件是网页交互中的重要组成部分,通过结合DOM操作、事件处理、日期对象以及第三方库,我们可以构建出功能强大、易用且符合用户习惯的时间选择工具。在开发过程中,考虑可访问性、国际化和性能...
在JavaScript的世界里,WebCalendar控件的实现依赖于对DOM(文档对象模型)的理解和熟练使用,通过操纵HTML元素来显示和更新日期。JavaScript是一种轻量级的解释型编程语言,常用于网页的动态效果和交互功能的实现。...
在本文中,我们将详细探讨这种控件的工作原理、使用方法以及它在实际开发中的应用。 1. **工作原理**: 省市级联动控件基于JavaScript语言实现,通过DOM操作动态更新下拉菜单,当用户在省或市的选项中做出选择时,...
- **JavaScript Date对象**:JavaScript内置的Date对象是处理日期和时间的基础,它可以创建、操作和格式化日期。但是,JavaScript的标准日期选择器功能有限,往往需要额外的库来增强用户体验。 2. **为什么需要js...
这个"js树型控件"资源是学习和实践JavaScript UI开发的一个良好实例,通过分析和使用这个控件,开发者可以深入理解JavaScript在构建动态、交互式界面方面的能力。同时,它也为实现自定义的树型控件提供了参考和灵感...
JavaScript是一种广泛应用于网页和应用程序开发的脚本语言,它的灵活性和强大的功能使得它在处理用户交互、动态内容和数据操作方面表现出色。在前端开发中,日期和时间控件是必不可少的元素,它们通常用于日历选择、...
在IT行业中,JavaScript(简称JS)是一种广泛使用的前端编程语言,尤其在网页交互和动态效果的实现上。在这个场景中,我们讨论的是一个用JS编写的日历控件,其目的是为了帮助用户在预订酒店时方便地选择入住日期和离...
在JavaScript(JS)开发中,下拉框树型控件是一种常见的交互元素,它结合了传统的下拉框和树形结构,通常用于显示层级关系的数据。这种控件在用户界面设计中非常有用,例如在选择组织结构、地区层级或者分类时。在本...
**插件使用**:在提供的文件列表中,`WdatePicker.js`可能是第三方日期时间选择插件的实现,如WdatePicker是基于JavaScript的日期时间选择器,它提供了一套完整的日期时间选择功能,包括日、月、年、时、分、秒的...
JavaScript(简称JS)是一种广泛用于客户端Web开发的脚本语言,它在网页中常用于处理用户的交互、操作DOM(文档对象模型)、以及实现各种动态效果。在这个场景中,"js日历控件日期多选Kalendajs" 提供了一种功能强大...
开发者可能会使用这个对象来初始化日期控件的默认值,以及处理用户选择日期时的事件。例如,当用户点击日期选择器时,一个弹出的日历视图可能会被显示出来,用户可以选择一个日期,然后JavaScript会更新HTML页面上的...
在JavaScript的世界里,日历控件是网页交互中常见的组件之一,主要用于用户输入日期或选择日期。...开发者可以根据项目需求,选择适合的控件并进行相应的定制,以创建出既美观又实用的日期选择功能。
JavaScript,作为网页开发的主要脚本语言,提供了丰富的库和自定义方法来创建动态和用户友好的日历控件。"Calendar(JS日历控件)"正是这样一个利用JavaScript实现的日历插件,旨在简化日期选择的过程,提高用户体验...