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

最新推荐文章于 2016-10-21 16:27:34 发布

s471417811

最新推荐文章于 2016-10-21 16:27:34 发布

阅读量125

点赞数

分类专栏： .net 文章标签： js响应事件 JS动态添加控件 js动态添加对象

本文链接：https://blog.csdn.net/s471417811/article/details/84183695

版权

.net 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

今天做项目的时候遇到一个比较纠结的问题，在后台上传图片的时候，如果上传多张图的话，并且产生相应的缩略图，在不刷新页面的情况下怎么办。

想到这点马上就想到了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>