• 上传控件的按钮改为图片


    因为控件虽然可以加CSS样式,但是还是无法将浏览按钮换成图片,尝试了隐藏控件然后用一图片按钮触发click事件,看起来还挺像回事,可是提交的时候都会把内容给清空了,原来这个控件存在安全机制问题,除了点击它的浏览按钮,不允许通过别的方式给它赋值。

    尝试了好多方案,终于发现个能用的,经过修改提高,终于将BUG减到最小。原理是当鼠标移动到图片按钮上时触发JS,将上传控件悄悄的移到鼠标下方,这样点击时就是点击到控件的浏览按钮上了。

    代码如下:

    JS:

    function moveMou()

    {
        f = document.getElementById(fileupload0);
        f.style.pixelLeft=(event.offsetX-15);
        f.style.pixelTop=event.y+495;

    }

    页面:<img alt="上传附件" style="cursor: pointer;" src='<%=Page.ResolveClientUrl("~/NewImages/btn-ad.gif") %>' onmousemove="moveMou()"/>

    <table style="position:absolute;top:-500px;"><tr><td id="att1"><input type="file" name="fileupload0" id="fileupload0" style="position:absolute;font-size:1px; 10px;filter:alpha(opacity=0);cursor: pointer;" hidefocus onchange='AddFile()' size='10'/></td></tr></table>

    代码解释:其中table的位置是为了初始化的时候input控件不要在屏幕范围内,这样就不会有人能误点点到了,filter:alpha(opacity=0);是使控件透明(这两点调试的时候可以先去掉)。pixelLeft和pixelTop的位置还需要具体根据情况调整,后面的参数换个页面就不一样了。因为我写的是多附件上传的控件,暂时还没发现换页面位置不一样的问题。font-size:1px;10px;和size='10'是为了修改控件的大小的,太大了误点的几率相对应就增加了。弄小些就是为了降低BUG的产生。

    在之后的应用中,将母版页改为框架页以后,控件出现了点不到的情况,后来发现是纵坐标出现了问题。后经改进,现在的代码能适应这两种情况。代码如下:

    function overMou(this)
    {
        fn = uploadName + uploadNum;
        f = GetAttachElement(fn);
        f.style.pixelLeft=(event.offsetX-15);
        objP = this;
        allTop=0;
        while (objP!=null)
        {
            allTop   +=   objP.offsetTop;
            objP = objP.offsetParent;
        }
        f.style.pixelTop=allTop +event.offsetY + 495;

    }


     关于event后面的参数:

    clientX
    检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。
    clientY
    检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。
    ctrlKey
    ctrlKey 检索CTRL键的当前状态
    可能的值 true为关闭
    false为不关闭
    dataFld
    检索被oncellchange事伯影响的列
    aTransfer
    为拖放操作提供预先定义的剪贴板式。
    Element
    检索在onmouseover和onmouseout事件期间退出的对象指针
    keyCode
    设置或检索与引发事件的关键字相关联的Unicode关键字代码
    该属性与onkeydown onkeyup onkeypress一起使用
    如果没有引发事件的关键字,则该值为0
    offsetX
    检索与触发事件的对象相关的鼠标位置的水平坐标
    offsetY
    检索与触发事件的对象相关的鼠标位置的垂直坐标
    propertyName
    检索在对象上己更改的特性的名称
    reason
    检索数据源对象数据传输的结果
    可能的值:
    0 数据传输成功
    1 数据传输失败
    2 数据传输错误
    recordset
    检索数据源对象中默认记录集的引用
    该特性为只读
    repeat
    检索一个事件是否被重复
    该属性只有在onkeydown事件重复时才返回true
    returnValue
    设置或检索从事件中返回的值
    可能的值:
    true 事件中的值被返回
    false 源对象上事件的默认操作被取消
    screenX
    检索与用户屏相关的鼠标的水平位置
    screenY
    检索与用户屏相关的鼠标的垂直位置
    shiftKey
    检索shiftKey键的当前状态
    可能的值 true为关闭
    false为不关闭
    srcElement
    检索触发事件的对象
    srcFilter
    检索导致onfilterchange事件触发的过滤器对象
    srcUm
    检索触发事件行为的同一资源名称
    除非下面两个条件都为真,否则该特性被设置为null
    1.行为被附加到触发事件的要素上
    2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件
    toElement
    检索作为onmouseover或者onmouseout事件结果而移动的对象
    type
    检索事件对象中的事件名称
    x
    检索相对于父要素鼠标水平坐标的整数
    y
    检索相对于父要素鼠标垂直坐标的整数

  • 相关阅读:
    ROS Learning-013 beginner_Tutorials (编程) 编写ROS服务版的Hello World程序(Python版)
    ROS Learning-012 beginner_Tutorials (编程) 创建自定义的ROS消息和ROS服务
    电子模块 001 --- 遥杆 JoyStick
    ROS Learning-011 beginner_Tutorials (编程) 编写 ROS 话题版的 Hello World 程序(Python版)
    STM32 C++编程 002 GPIO类
    Python 网络爬虫 002 (入门) 爬取一个网站之前,要了解的知识
    STM32 C++编程 001 工程模板
    ROS Learning-010 beginner_Tutorials 编写简单的启动脚本文件(.launch 文件)
    Python 网络爬虫 001 (科普) 网络爬虫简介
    Python 黑客 --- 002 入门级 ZIP压缩文件口令暴力破解机
  • 原文地址:https://www.cnblogs.com/Hary/p/1336376.html
Copyright © 2020-2023  润新知