<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显示的更多相关文章

  1. FormData上传文件(input file)

    <div> <input type="file" name="FileUpload" id="FileUpload" va ...

  2. Ajax 上传文件(input file FormData)

    FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...

  3. 隐藏<input type="file"> 实现点击div或图片打开文件选择路径

    HTML: <input type="file" style="display:none" id="addfile-btn"> ...

  4. 给上传文件的input控件"美容"

    作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工 ...

  5. 给上传文件的input控件“美容”

    在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮. demo: html代码 <b ...

  6. 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 ...

  7. 利用jquery来隐藏input type="file"

    <li> <input type="text" name="token" value = "<?php ech$_SESSIO ...

  8. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. [转]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 ...

随机推荐

  1. apche启动错误|httpd.pid overwritten — Unclean shutdown of previous Apache run?

    APACHE启动成功,但无法接受任何请求,查看ERROR.LOG文件[warn] pid file /opt/apache/logs/httpd.pid overwritten - Unclean s ...

  2. JSF primefaces dataTable paginator 表格分页 问题

    当第一次查询返回list列表,分页1,2,3.....这是选择2,当前页面停留在第2页. 当再次查询后,因为使用的ajax,结果更新了,但当前页面依旧是第2页. 可以在jsf页面,datatable的 ...

  3. 【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(五)

    SpringSecurity(2) 好久没有写了,之前只写了一半,我是一边开发一边写Blog一边上班,所以真心没有那么多时间来维护Blog,项目已经开发到编写逻辑及页面部分了,框架基本上已经搭建好不会 ...

  4. arch+xfce4系统配置

    音量控制快捷键插件: sudo pacman -S xfce4-volumed

  5. 构造函数忘记new? 看这里看这里

    方法一:自调用构造函数 function Person(name){ if( !(this instanceof Person)){//一定要放在开头.检查this是否为构造函数的一个实例 retur ...

  6. 12月15日smarty模板基本语法

    smarty基本语法: 1.注释:<{* this is a comment *}>,注意左右分隔符的写法,要和自己定义的一致. <{* I am a Smarty comment, ...

  7. SpringMVC学习记录5

    Springmvc流程中的扩展点有很多,可以在很多地方插入自己的代码逻辑达到控制流程的目的. 如果要对Controller的handler方法做统一的处理.我想应该会有很多选择,比如:@ModelAt ...

  8. Fedora20-32bit cross-compiling arm-linux-gcc4.3.2

    目录 0 前言 1 安装arm-linux-gcc-4.3.2 2 配置 nfs 服务器 0 前言 之前在 fedora 64bit 上建立交叉编译,但由于4.4.3版本需要另装用于gdb-serve ...

  9. 1.1、MyEclipse自定义注释

    一.修改进入路径: Window->Preference->Java->Code Style->Code Template->Comments 二:编辑自定义注释 文件  ...

  10. Web 常用功能测试方法

    功能测试就是对产品的各功能进行验证,根据功能测试用例,逐项测试,检查产品是否达到用户要求的功能.常用的测试方法如下: 1. 页面链接检查:每一个链接是否都有对应的页面,并且页面之间切换正确. 2. 相 ...