easyUI filebox选择同一个文件不触发onchange事件解决办法

  IE(包括ie11)浏览器下,easyUI的filebox如果选中了同一个文件,不会触发onchange事件解决办法。easyUI filebox实际操作的还是file对象,其他标准浏览器如chrome,Firefox,file对象选中同一个文件也会触发onchange事件,所以在这些浏览器下easyUI的filebox选中同一个文件也是触发onchange事件的,但是ie对选中同一个文件不会触发onchange事件,解决办法和操作file对象原理差不多,参考:file对象选中同一个文件如何触发change事件

  不过easyui的filebox对象对UI做了美化,filebox对应的file对象没有显示出来的,需要用开发工具查看easyUI filebox的dom结构才能按照上面的文章进行ie配置,更新file对象。

 

  本示例居于easyUI1.4.3,DOM结构如下,如果其他版本的easyUI注意查看filebox生成的dom结构修改相关选择器。

easyUI filebox选择同一个文件不触发onchange事件解决办法

  easyUI filebox选择同一个文件不触发onchange事件解决办法

小提示:为了解决ie file对象同一个文件不触发onchange事件,生成了2个同名的file对象,最新添加的一个file对象没有值,注意服务器端获取值的时候对同名name获取文件需要判断哪个是有值的,或者可以给表单添加onsubmit事件,删除ie下添加的新file对象。

<form method="post" enctype="multipart/form-data" onsubmit="return removeEmptyFile(this)">
        <div class="easyui-panel" title="Upload File" style="width:400px;padding:30px 70px 50px 70px">
            <div style="margin-bottom:20px">
                <div>Name:</div>
                <input class="easyui-textbox" style="width:100%">
            </div>
            <div style="margin-bottom:20px">
                <div>File1:</div>
                <input class="easyui-filebox" name="file1" id="file1" data-options="prompt:'Choose a file...',onChange:newFileInput" style="width:100%">
            </div>
            <div style="margin-bottom:20px">
                <div>File2:</div>
                <input class="easyui-filebox" name="file2" data-options="prompt:'Choose another file...'" style="width:100%">
            </div>
            <div>
                <a href="#" class="easyui-linkbutton" style="width:100%">Upload</a>
            </div>
        </div>
</form>
<script>
    var isIE = window.ActiveXObject || 'ActiveXObject' in window//是否IE浏览器
    function newFileInput() {
        if (isIE) {
            var file = $(this).filebox('textbox').next(),
                newfile = file.clone(true);//克隆一个新file对象,包括id,这样下次点击filebox的选择文件按钮就是操作此新file对象,会触发onchange事件,否则ie同一个文件不会触发onchange事件
            if (file.next().length) file.next().remove();//删除上一次的当前file对象
            file.removeAttr('id');//删除当前操作的file对象的id
            file.before(newfile);//将新file对象插入到当前操作文件对象前面
        }
        alert('change' )
    }
    function removeEmptyFile(f) {
        if (isIE) {//IE下删除新file对象
            $(f.file1).filebox('textbox').next().remove();
            //删除更多个filebox对象
        }
    }
</script>

 


原创文章,转载请注明出处:easyUI filebox选择同一个文件不触发onchange事件解决办法

评论(0)Web开发网
阅读(1689)喜欢(1)easyui开发技巧