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

最新推荐文章于 2023-12-19 10:00:18 发布

weixin_30883777

最新推荐文章于 2023-12-19 10:00:18 发布

阅读量403

点赞数

文章标签： xhtml javascript json ViewUI

原文链接：http://www.cnblogs.com/fredlau/archive/2008/10/24/1318926.html

版权

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

Code
<!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>

转载于:https://www.cnblogs.com/fredlau/archive/2008/10/24/1318926.html

weixin_30883777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
file上传控件onchange事件失效的解决方法

最近在做项目时，遇到一些用户操作方面的问题，用户想点击input file控件的浏览就直接将文件读取到列表中，我使用StreamReader读取文件时，遇到IO权限的问题，要想读取文件到StreamReader中必须对该文件享有User可读权限，许多用户的客户端不可能手动设置给这个用户的权限，考虑到安全问题，我只好先上传到服务器端，然后再读取上传后的文件，这样权限问题就解决了。但是直接点击inpu...
复制链接

扫一扫