上传文件按钮_文件上传按钮 - CSDN
精华内容
参与话题
  • <!DOCTYPE html> <html lang="en"> <head&...改变上传按钮样式</title> </head> <style>  .uploadFi

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>改变上传按钮样式</title>
    </head>
    <style>
        .uploadFile {width: 73px;height: 73px;position: absolute;z-index: 999;margin-left: 10px;opacity: 0;}
        .uploadStyle {width: 73px;height: 73px;background: url(images/camera_icon.png) no-repeat center;border: 1px dashed #d9d9d9;margin-left: 10px;background-color: #fff;background-size: 29px 24px;}
    </style>
    <body>
        <div class="not_eval_pic">
            <input type="file" class="uploadFile">
            <div class="uploadStyle"></div>
        </div>
    </body>
    </html>

    展开全文
  • CSS之文件实现上传按钮

    千次阅读 2019-04-20 20:39:34
    文件上传按钮 <input type="file" id="btn_file"> 默认样式: 默认样式着实不好看,而且我想让后面的‘未选择文件上传’去掉,将color设置为transparents就可以实现,但是我又想将按钮的字体颜色改为蓝色,...

    文件上传按钮

    <input type="file" id="btn_file">
    

    默认样式:
    在这里插入图片描述
    默认样式着实不好看,而且我想让后面的‘未选择文件上传’去掉,将color设置为transparents就可以实现,但是我又想将按钮的字体颜色改为蓝色,显然就冲突了,实现不了。

    改进方法:

    <input type="file" id="btn_file" style="display:none">
    <button @click="handleSelectFile" class="upload_file">上传文件</button>
    
     .upload_file{
        color:#333333;
        background-color: #fff;
        padding:10px 30px;
        margin-right:10px;
        outline:none;
        border:1px solid #ccc;
      }
    
     methods:{
        handleSelectFile:function(){
          document.getElementById('btn_file').click()
        },
    }
    

    效果如图
    在这里插入图片描述
    其中还解决了几个效果问题
    (1)右边蓝色按钮本来用input元素,发现点击会出现抖动的情况,遂改成button元素,(2)butto元素点击会出现蓝色边框,设置outline:none去掉,中间的文本框道理类似
    (3)蓝色button元素有阴影边框,设置border:none去掉
    (4)而左边的白色button元素则重新设置边框border:1px solid #ccc覆盖掉默认边框。
    (5)布局问题:
    整个div里面包含左边的按钮,中间的输入框和右边的按钮,将最外层div设置为flex盒子

     #upload{
        display:flex;
        flex-direction: row;
        justify-content: center;
        padding-top:20px;
        padding-bottom:20px;
      }
    

    而中间的输入框设置为自适应

     .input_url{
        padding:10px;
        flex-grow:1;
        outline:none;
    
      }
    
    展开全文
  • 通过点击按钮实现上传的主要目的是对用户友好。新浪微博则是通过点击文本实现图片上传。 一个简单的例子: &lt;form method="post" action="... enctype="...请选择文件" size=&qu

    通过点击按钮实现上传的主要目的是对用户友好。新浪微博则是通过点击文本实现图片上传。

    一个简单的例子:

    <form method="post" action="http://localhost/" enctype="multipart/form-data">
            <input type="button" value="请选择文件" size="30" οnclick="f.click()" />
            <input type="file" id="f" οnchange="this.form.submit()" name="f" style="position:absolute; filter:alpha(opacity=0); opacity:0; width:30px; " size="1" />
    </form>
    

      

    如上例子在 Firefox 4 和 Chrome 11 上正常运行。由于 IE 的怪异表现,若在点击按钮时触发上传文件的字段的 click 事件,即使选中了文件也无法成功上传文件。 IE 8 给出的错误信息是“无法访问”。据说原因是“这个是ie居于安全性考虑的限制。input file必须使用手动触发click事件”。

    我们把上述例子修改如下:

    <form method="post" action="http://localhost/" enctype="multipart/form-data">
    <input type="button" οnmοusemοve="move(event)" value="请选择文件" size="30" />
    <input type="file" id="f" οnchange="this.form.submit()" name="f" style="position:absolute; filter:alpha(opacity=0); opacity:0; width:30px; " size="1" />
    </form>
    <script type="text/javascript">
    function move(event){
    var event=event||window.event;
    var a=document.getElementById('f');
        a.style.left=event.clientX-50+'px';
        a.style.top=event.clientY-10+'px';
    }
    </script>
    

      

     

    跟上个例子相比,为按钮添加了 onmousemove 事件,主要目的是鼠标移动至按钮时,把上传文件字段置于鼠标下,这样点击按钮时实际上点击的是上传文件字段,而不是这个按钮。再次在 IE 下测试,可以上传文件了。

    一切看起来很正常,一个潜在的问题是若页面内容超出一屏范围,而很不幸的是按钮和上传字段不在同一屏,问题产生了,点击按钮无法出现选择文件的对话框。这是由于使用了 clientX 和 clientY 事件属性,而 clientY 的坐标不考虑文档的滚动。解决方案是用 jquery 的 pageX 事件属性。它实现了跨浏览器支持。

     

    原文出自:http://blog.csdn.net/rainyjune/article/details/6877975

    展开全文
  • [html]自定义文件上传按钮

    千次阅读 2014-04-01 17:48:50
    如果觉得文件上传按钮太难看,如果觉得上传按钮在各个浏览器上显示的效果不一致。我们可以自定义文件上传按钮。 实现方案是将文件上传按钮的点击事件传递给其他按钮。 .html -> 文件上传 .css -> ...

    如果觉得文件上传按钮太难看,如果觉得上传按钮在各个浏览器上显示的效果不一致。我们可以自定义文件上传按钮。

    实现方案是将文件上传按钮的点击事件传递给其他按钮。


    .html ->

    <input type = "file" id="myFile" />

    <button id="myBtn">文件上传</button>


    .css ->


    #myFile {

        visibility: hidden;    /* 隐藏 */

    }


    #myBtn {

        /* 在这里自定义你的按钮样式 */

    }


    .js (为了简便起见,这里使用jQuery控件)


    $('#myBtn').click(function() {

        $('#myFile').click(); // 模拟文件上传按钮点击操作

    });



    展开全文
  • 添加附件按钮,并上传文件

    千次阅读 2019-05-10 15:21:29
    <button name="select_ownerfile" string="附件" type="object" class="btn-primary"/> @api.multi def select_ownerfile(self): view_id = self.env.ref('bicon_base_data.select_ownerfile...
  • 修改文件上传按钮样式

    千次阅读 2016-04-26 22:51:38
    页面中修改文件上传默认按钮样式!
  • HTML5 上传文件按钮代码

    万次阅读 2018-05-03 15:48:14
    使用文字代替&...上传文件&lt;/label&gt; &lt;form&gt;&lt;input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"&a
  • 上传文件&上传按钮

    千次阅读 2019-04-27 15:10:29
    在实际应用中,用户上传文件是必不可少的一个功能,当然form表单中,也有专门的input来上传文件,最基础的上传文件功能的实现: <form action = " " method = "post" enctype= "multipart/form-data "> <...
  • input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用a标签或其他标签包裹,就实现了美化功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
  • 单击按钮文件上传

    千次阅读 2019-04-25 16:51:22
    <button id="uploadExcel" onclick="uploadExcel()"> 上传文件</button> <script> /*导入Excel*/ function uploadExcel() { /*#load:为按钮,点击后生成一个隐藏的input file标签*/ ...
  • 点击button按钮,实现文件上传

    千次阅读 2019-09-19 07:30:54
    <input type="file">设置input的透明度为0,然后定义其所在div的样式 <!DOCTYPE html> <html> <head> <style> .fileInputCo...
  • html+css实现自定义图片上传按钮

    万次阅读 多人点赞 2019-01-07 11:01:20
    用定位将自定义的按钮遮住原来的选择文件按钮, 再让点击自定义按钮时触发原来的选择文件按钮的事件即可 (对此,label可实现) eg: html: css样式: 结果图: 点击“选择图片”按钮,则会触发选择图片的事件,你...
  • 一个按钮完成前台上传文件操作

    万次阅读 2017-08-27 13:25:18
    我们都知道,前台选择文件,只能通过input的file类型的文件选择框操作。但有时却为了界面的美观,要求用按钮来完成。 第一步、隐藏文件选择框 第二步、设置按钮事件onclick,触发文件选择框事件  第三步、选择...
  • /*批量导入*/ /*#load:为按钮,点击后生成一个隐藏的input file标签*/ $('#load').after('()">'); $('#load').click(function(){
  • 表单中有文件也有输入框,想要在弹出的选择文件对话框点击确定时,就完成上传文件 表单只传递输入框的值到后台,弹出的选择文件对话框点击确定这个事件怎么写,用js怎么 弄
  • js实现点击按钮弹出上传文件的窗口

    千次阅读 2017-09-27 14:05:02
    1.详细描述 在页面上设置一个“选择文件按钮,点击该按钮,会弹出本地磁盘信息用于选择文件。 2.代码 Demo ...选择文件 3.操作示例 将代码复制到W3CSchool的测试页面,提交
  • 按钮 默认为 “choose file” 更改为上图汉字方式如下: buttonText:'选择',prompt:'请选择文件...'"/>
  • 出于安全方面的考虑,通过JS修改input-file的value是无法正确上传文件的。 只有当鼠标真正单击在上传控件的浏览按钮所添加的文件才可以上传。 使用按钮触发input-file需要通过模拟实现。 方法是:在button上方添加...
  • 不同的页面都有文件上传按钮 选择展示不同的页面,页面的文件上传按钮不起作用 查资料: 动态添加的元素没有办法渲染layui.upload.render(); 分析: 1、页面在选择前,JS里的layui.upload.render()已经执行了 2、...
  • 前端代码: # 这里使用display:none将input标签隐藏 &lt;input type="file" name="file" id="file" onchange="fileUpload()" style="...select_file
1 2 3 4 5 ... 20
收藏数 137,431
精华内容 54,972
关键字:

上传文件按钮