上传文件 隐藏input type="file",用text显示

<div>
<span>上传文件:</span>
<input type="file" id="upload_file" style="display: none;" onchange="change();">
<input type="text" id="upload_file_tmp" readonly="readonly" onclick="upload_file.click(); ">
<button type="button" class="file" id="select_file" onclick="upload_file.click();" >
选择文件
</button>
</div>
input[type="text"] {
height:20px;
border:none;
border-bottom:1px solid #ccc;
width:150px;
margin-right:10px;
outline:none;
height:25px;
}
.file {
outline: none;
border:none;
background: #67BEF4;
border-radius: 4px;
padding: 4px 12px;
cursor:pointer;
color: #fff;
font-size:18px;
line-height: 20px;
vertical-align: middle;
}
function change(){
document.getElementById("upload_file_tmp").value=document.getElementById("upload_file").value;
}
上传文件 隐藏input type="file",用text显示的更多相关文章
- FormData上传文件(input file)
<div> <input type="file" name="FileUpload" id="FileUpload" va ...
- Ajax 上传文件(input file FormData)
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...
- 隐藏<input type="file"> 实现点击div或图片打开文件选择路径
HTML: <input type="file" style="display:none" id="addfile-btn"> ...
- 给上传文件的input控件"美容"
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工 ...
- 给上传文件的input控件“美容”
在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮. demo: html代码 <b ...
- hadoopmaster主机上传文件出错: put: File /a.txt._COPYING_ could only be replicated to 0 nodes instead of minReplication (=1). There are 3 datanode(s) running and 3 node(s) are excluded in this operation.
刚开始装好hadoop的时候,namenode机上传文件没有错误,今天打开时突然不能上传文件,报错 put: File /a.txt._COPYING_ could only be replicate ...
- 利用jquery来隐藏input type="file"
<li> <input type="text" name="token" value = "<?php ech$_SESSIO ...
- input[type="file"]上传图片并显示图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [转]Spring Boot修改最大上传文件限制:The field file exceeds its maximum permitted size of 1048576 bytes.
来源:http://blog.csdn.net/awmw74520/article/details/70230591 SpringBoot做文件上传时出现了The field file exceeds ...
随机推荐
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- js键盘事件和焦点事件
键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...
- 转:sublime上使用git连接github
"工欲善其事,必先利其器." 这是古人的教诲,也是一个高效率的工程师需要遵循的法则之一.从大学开始写Java使用了JBuilder,Eclipse,后来写PHP用了Zend,写Ja ...
- 【ASP.NET程序员福利】打造一款人见人爱的ORM(二)
上一篇我已经给大家介绍AntORM的框架[ASP.NET程序员福利]打造一款人见人爱的ORM(一),今天就来着重介绍一下如何使用这套框架 1>AntORM 所有成员 如果你只想操作一种数据库,可 ...
- 报错:init: Could not find wglGetExtensionsStringARB!
如下操作即可恢复:
- android中导入低版本project可能会遇到的编译问题(转自: Victor@Beijing)
使用高版本的SDK后再导入以前用低版本的project时,会遇到一些兼容性的问题. (1)Unable to resolve target 'android-5' 因为本机中现在使用的是2.2的SDK ...
- 记录分享公司Spring data相关配置
起因 公司Spring Data相关的配置还是有点意思的,不过蛮复杂的...XML很多...我不太喜欢强行记住....所以我打算记录一下配置的大致思路和结构,以后可能会有用.... 总体结构 总体结构 ...
- SQL语句判断数据库、表、字段是否存在
from master..sysdatabases where name='TestDB') print 'TestDB存在'else print 'TestDB不存在' --判断表[Te ...
- orpsocv2 从ROM(bootrom)启动分析--以atlys板子的启动为例子
1 复位后的启动地址 1) 复位后,启动地址在or1200_defines.v最后宏定义,atlys板子的目录:orpsocv2\boards\xilinx\atlys\rtl\verilog\inc ...
- 再谈如何使用Taglist?
以前使用个taglist, 但是只是查看, 没有熟练的去使用, 补充一下: 参考文章: http://blog.csdn.net/vaqeteart/article/details/4146618 用 ...