文件上传比较丑,样式调整时会有一个获取文件名,或者包含文件路径的文件名的方法

html代码

    <div class="file-box">
<form id="uploadForm">
<input type="text" id="textfield" class="txt" />
<input type="button" class="btn" value="浏览..." />
<input type="file" name="file" class="file" id="fileField" onchange="document.getElementById('textfield').value=this.files[0].name"/>
<input type="submit" class="btn" value="上传" />
</form>
</div>

CSS样式

.file-box{ position:relative;width:340px;margin:20px;}

.txt{ height:28px;line-height:28px; border:1px solid #cdcdcd; width:180px;}

.btn{width:70px; color:#fff;background-color:#3598dc; border:0 none;height:28px; line-height:16px!important;cursor:pointer;}

.btn:hover{background-color:#63bfff;color:#fff;}

.file{ position:absolute; top:0; right:85px; height:30px;line-height:30px; filter:alpha(opacity:0);opacity: 0;width:254px }

效果图

只获取文件名

document.getElementById('fileField').files[0].name

获取带路径的文件名

document.getElementById('fileField').value

input type="file"获取文件名方法的更多相关文章

  1. input[type=&#39;file&#39;]获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

  2. 知识点:定义input type=file 样式的方法(转)

    ——“当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的 input type=file” 为什么要美化file控件?试想一下,别 ...

  3. JavaScript input type=file 获取文件大小及类型限制

    <input name="txtName" type="file" id="pic" onchange="loadImage ...

  4. javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = &quot;file&quot;中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  5. js 获取、清空 input type=&quot;file&quot;的值 .(转)

    上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...

  6. input[type=&quot;file&quot;]的样式以及文件名的显示

    如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...

  7. 获取input type=file 的文件内容(纯文本)

    一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...

  8. js 获取input type=&quot;file&quot; 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  9. Android WebView 不支持 H5 input type=&quot;file&quot; 解决方法

    最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...

随机推荐

  1. UI内侧错题

    此题考察的是JQuery UI下的menu插件的使用,ui-menu表示菜单的外层容器,如果菜单包含图标,该元素会另外带一个 ui-menu-icons class.故A B选项错误.ui-menu- ...

  2. IEEE754、VAX、IBM浮点型介绍和.NET中互相转换

    [题外话] 最近在做C3D文件的解析,好奇怪的是文件中竟然存储了CPU的类型,原本不以为然,结果后来读取一个文件发现浮点数全部读取错误.查了下发现虽然在上世纪80年代就提出了IEEE754要统一浮点数 ...

  3. 【原创】 windows下开发软件推荐

    1. 数据库查看器工具 navicat.exe

  4. Valgrind 安装与使用

    调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www.valgrind.org下载最新版valgrind-3.2.3.tar.bz2 2. 解压安装包:tar –jxvf ...

  5. PL/SQL Developer实现双击table表名查询

    双击table默认为Expand/Collapse 展开/折叠 有时需快速查看该表数据,如果写select * from tab会显得麻烦, 我们可实现双击table来进行快速查询 方法为:Tools ...

  6. linux下权限问题思考

    今天遇到一些关于linux的权限问题,文件的所有者,文件的所属组等问题,文件对于所有者所属组是非常敏感的,同一个脚本所属者所属组不同,得到执行的结果也是差很多的.

  7. 树莓派3 开机自启动(SPI)

    转自:https://www.raspberrypi-spy.co.uk/2014/08/enabling-the-spi-interface-on-the-raspberry-pi/ 方案一:图形界 ...

  8. JavaScrip 入门第一课

    一.代码引入的三种方式 1.直接在head中书写 在head标签里面可以写,在body标签里面也可以写,放到head标签里面和放到body标签里面到底有什么区别,我们后续在讲~ <head> ...

  9. Canvas绘图优化之使用位图--基于createjs库

    在地图上实时绘制大量(万级别)图形,实时绘制的原因是因为各个图形形状不同,图形要按照后端传送的参数来绘制. 用canvas绘制图形比较方便,javascript的api接口也比较简单.现在也有很多的j ...

  10. 【Linux】深入理解Linux中内存管理

    主题:Linux内存管理中的分段和分页技术 回顾一下历史,在早期的计算机中,程序是直接运行在物理内存上的.换句话说,就是程序在运行的过程中访问的都是物理地址. 如果这个系统只运行一个程序,那么只要这个 ...