改变文件域的样式实现思路同时兼容ie、firefox

代码如下:

<body>
<input type=file id="j" onchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" />
<input id="ye" style="color: green;border: 1px solid green;width:300px;" />
<input type="button" value="File" style="border: 1px solid green;width:80px;" />
</body>

<script language="javascript">
function getValue(){
document.getElementById('ye').value = document.getElementById('j').value;
}
</script>

思路：

1、把顽固的文件域就是<input type=file /> 透明化：style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;"

2、用一个文本框和按钮代替文件与的外观

3、将文件域的浏览按钮放到我们写的按钮的上方

4、用js得到文件域value改变时的值即：得到的文件路径，并赋给文本框的value，这样就ok了

我只是试验，样式很简陋；其实可以进一步美化；

这样的好处：只是模拟了file文件域的外观，其实起作用的还是文件域file，这样就很方便。

赞 (0)

相关推荐

  • 改变文件域的样式实现思路同时兼容ie、firefox

    复制代码 代码如下: <body> <input type=file id="j" onchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" /> <input id="ye" style="color: green;borde

  • 使用jQuery清空file文件域的解决方案

    般来说,在对一个文件域(input type="file")使用了验证后,我们总会希望把文件域中的值给清空了(否则错误的文件仍然会被提交),而在IE中,安全设置的原因,是不允许更改文件域的值的(也就是不能使用val("")) 那么很显然,我们就只能换个思路,把这个input元素复制一个,然后将原来的删除. 在IE下复制元素的时候,其中的值是不会被复制的,所以就达到了清空文件域的目的了. 而在Firefox下,其中的值也会被一同复制,那么我们就顺便清空一下就做到兼容了

  • 浅析JSONP解决Ajax跨域访问问题的思路详解

    前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

  • Cipher 在 NTFS 卷上显示或改变文件的加密

    Cipher 在 NTFS 卷上显示或改变文件的加密.如果在不含带参数的情况下使用,则 cipher 将显示当前文件夹及其所含文件的加密状态. 语法 cipher [{/e|/d}] [/s:dir] [/a] [/i] [/f] [/q] [/h] [/k] [/u[/n]] [PathName [...]] | [/r:PathNameWithoutExtension] | [/w:PathName] 参数 /e  加密指定的文件夹.文件夹做过标记后,使得以后添加到该文件夹的文件也被加密. 

  • vue解决跨域路由冲突问题思路解析

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*

  • 当vue路由变化时,改变导航栏的样式方法

    当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co

  • js 实现文件上传样式详情

    js 实现文件上传样式详情

    目录 1.概述 2.创建对象的参数 3.监听例子 4.使用方法 5.源代码 1.概述 这个js包括按钮样式,列表样式.带有删除.添加.放大(使用的是自带的放大功能,提供有API来放入你的弹窗来进行展示) 可监听的事件 Value wdaasd onlargeClickCallBack 如果想使用自己的弹窗,只需要监听这个函数,拿到返回值给你的弹窗的img->href进行赋值即可 imgFile对象(包括这个被点击图片的全部信息)that(这个js的全局唯一对象,可以在这里面拿到你所有的值) on

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

  • vue+vux实现移动端文件上传样式

    vue+vux实现移动端文件上传样式

    样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file'  就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>

  • Ajax表单异步上传文件实例代码（包括文件域）

    1.起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 2.尝试 先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSu

随机推荐