input type="file"获取文件名方法

飞天龙猫 2018-05-04 原文

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

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"获取文件名方法的更多相关文章

input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
知识点：定义input type=file 样式的方法（转）
——“当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的 input type=file” 为什么要美化file控件?试想一下,别 ...
JavaScript input type=file 获取文件大小及类型限制
<input name="txtName" type="file" id="pic" onchange="loadImage ...
javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
js 获取、清空 input type="file"的值 .（转）
上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...
input[type="file"]的样式以及文件名的显示
如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...
获取input type=file 的文件内容（纯文本）
一.获取input type=file 的文件内容(纯文本) 1.需求一通过点击其他事件,来触发文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...
js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息
文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...
Android WebView 不支持 H5 input type="file" 解决方法
最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中标签不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...

随机推荐

UI内侧错题
此题考察的是JQuery UI下的menu插件的使用,ui-menu表示菜单的外层容器,如果菜单包含图标,该元素会另外带一个 ui-menu-icons class.故A B选项错误.ui-menu- ...
IEEE754、VAX、IBM浮点型介绍和.NET中互相转换
[题外话] 最近在做C3D文件的解析,好奇怪的是文件中竟然存储了CPU的类型,原本不以为然,结果后来读取一个文件发现浮点数全部读取错误.查了下发现虽然在上世纪80年代就提出了IEEE754要统一浮点数 ...
【原创】 windows下开发软件推荐
1. 数据库查看器工具 navicat.exe
Valgrind 安装与使用
调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www.valgrind.org下载最新版valgrind-3.2.3.tar.bz2 2. 解压安装包:tar –jxvf ...
PL/SQL Developer实现双击table表名查询
双击table默认为Expand/Collapse 展开/折叠有时需快速查看该表数据,如果写select * from tab会显得麻烦, 我们可实现双击table来进行快速查询方法为:Tools ...
linux下权限问题思考
今天遇到一些关于linux的权限问题,文件的所有者,文件的所属组等问题,文件对于所有者所属组是非常敏感的,同一个脚本所属者所属组不同,得到执行的结果也是差很多的.
树莓派3 开机自启动(SPI)
转自:https://www.raspberrypi-spy.co.uk/2014/08/enabling-the-spi-interface-on-the-raspberry-pi/ 方案一:图形界 ...
JavaScrip 入门第一课
一.代码引入的三种方式 1.直接在head中书写在head标签里面可以写,在body标签里面也可以写,放到head标签里面和放到body标签里面到底有什么区别,我们后续在讲~ <head> ...
Canvas绘图优化之使用位图--基于createjs库
在地图上实时绘制大量(万级别)图形,实时绘制的原因是因为各个图形形状不同,图形要按照后端传送的参数来绘制. 用canvas绘制图形比较方便,javascript的api接口也比较简单.现在也有很多的j ...
【Linux】深入理解Linux中内存管理
主题:Linux内存管理中的分段和分页技术回顾一下历史,在早期的计算机中,程序是直接运行在物理内存上的.换句话说,就是程序在运行的过程中访问的都是物理地址. 如果这个系统只运行一个程序,那么只要这个 ...