您的位置：首页 > 其它

file上传控件onchange事件失效的解决方法

2008-10-24 17:06 567 查看

最近在做项目时，遇到一些用户操作方面的问题，用户想点击input file控件的浏览就直接将文件读取到列表中，我使用StreamReader读取文件时，遇到IO权限的问题，要想读取文件到StreamReader中必须对该文件享有User可读权限，许多用户的客户端不可能手动设置给这个用户的权限，考虑到安全问题，我只好先上传到服务器端，然后再读取上传后的文件，这样权限问题就解决了。但是直接点击input file控件就上传，就要使用异步上传了，我在寻找file控件的部分事件时，发现onchange竟然存在这样一个问题，第一次浏览时是可以使用的，再浏览时onchange也就不激发了，为什么呢，曾经想过onpropertychange这个事件，尝试后依然不激发。

后来我寻找了一个解决方法，就是每点击浏览激活onchange事件一次，就重新初始化一下这个控件，毕竟第一次onchange是可以激发的。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>无标题页</title>

    <script language="javascript" type="text/javascript" src="js/jquery.pack.js"></script>

    <script language="javascript" type="text/javascript" src="js/ajaxfileupload.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#File1").change(function(){

                    fileOnchage();

            });

        });



        function fileOnchage()

        {

            var content = '\

                <input id="File1" name="File1" type="file" onchange="fileOnchage();" />\

            ';

            $("#dv").append(content);



            $.ajaxFileUpload({

                url:'response/Handler.ashx',          //需要链接到服务器地址

                secureuri:false,

                fileElementId:'File1',                        //文件选择框的id属性

                dataType: 'json',                             //服务器返回的格式，可以是json

                success: function (data, status){

                    //bind(data);

                },

                error: function (data, status, e)

                {

                    alert(e);

                }

            });

            $("#File1").remove();

        }

    </script>

</head>

<body>

    <form id="form1" method="post" action="" enctype="multipart/form-data">

        <div id="dv">

            <input id="File1" name="File1" type="file" />

        </div>

    </form>

</body>

</html>

我利用了jquery的remove方法，remove方法只会移除单个元素，所以新添加的会代替原来的继续使用。不知道大家有没有更好的办法。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>无标题页</title>

    <script language="javascript" type="text/javascript" src="js/jquery.pack.js"></script>

    <script language="javascript" type="text/javascript" src="js/ajaxfileupload.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#File1").change(function(){

                    fileOnchage();

            });

        });



        function fileOnchage()

        {

            var content = '\

                <input id="File1" name="File1" type="file" onchange="fileOnchage();" />\

            ';

            $("#dv").append(content);



            $.ajaxFileUpload({

                url:'response/Handler.ashx',          //需要链接到服务器地址

                secureuri:false,

                fileElementId:'File1',                        //文件选择框的id属性

                dataType: 'json',                             //服务器返回的格式，可以是json

                success: function (data, status){

   //bind(data);

                }

            });

            $("#File1").remove();

        }

    </script>

</head>

<body>

    <form id="form1" method="post" action="" enctype="multipart/form-data">

        <div id="dv">

            <input id="File1" name="File1" type="file" />

        </div>

    </form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航