应用JS相应事件以及动态创建对象控件
日期：2014-05-16 浏览次数：20319 次
使用JS相应事件以及动态创建对象控件
今天做项目的时候遇到一个比较纠结的问题，在后台上传图片的时候，如果上传多张图的话，并且产生相应的缩略图，在不刷新页面的情况下怎么办。
想到这点马上就想到了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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
