<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. PHP判断SESSION过期的方法

    在公共函数function.php中添加如下方法,即可控制用户登录的SESSION有效期 //封装SESSION过期判断方法function start_session($expire = 0){ $ ...

  2. oracle--第一天议--bai

    第一天: 1 oracle的安装 a 卸载 b 安装服务器软件及数据库(orcl) --OracleServiceOrcl c 执行网络配置--配置监听1521,本地net服务名(创建1个外部连接的u ...

  3. Android SD卡存储

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_SDcard_store.html 一 概念 SD卡存储空间比较大,当需要存取较大的 ...

  4. c# .Net并行和多线程编程之Task学习记录!

    任务Task和线程Thread的区别: 1.任务是架构在线程之上的,也就是说任务最终还是要抛给线程去执行. 2.任务跟线程不是一对一的关系,比如开10个任务并不是说会开10个线程,这一点任务有点类似线 ...

  5. 【转】windows环境下安装win8.1+Mac OS X 10.10双系统教程

    先要感谢远景论坛里的各位大神们的帖子  没有他们的分享我也不能顺利的装上Mac OS X 10.10! 写这篇随笔主要是为了防止自己遗忘,同时给大家分享下我的经验. 本教程适用于BIOS+MBR分区的 ...

  6. github怎么退出组织和删除自己创建的组织

    1. 点击头像,进入settings 2. 点击左侧菜单中的 Organizations 切换到Origanizations后,右侧面板中会出现所有的oragnizations,我这里只有一个,是我自 ...

  7. Angular 之坑??

    1. 场景:bootstrap的popup画面中有一个select元素, <select > <option> 1 </option> <option ng- ...

  8. leetcode--Different Ways to Add Parentheses

    题目链接:https://leetcode.com/submissions/detail/86532557/ 算法类型:分治法 题目分析:计算表达式的所有结果可能性 代码实现: class Solut ...

  9. Java多线程--线程安全问题的相关研究

    在刚刚学线程的时候我们经常会碰到这么一个问题:模拟火车站售票窗口售票.代码如下: package cn.blogs.com.isole; /* 模拟火车站售票窗口售票,假设有50张余票 */ publ ...

  10. NOSDK--关于android傻瓜式的分包设想

    一直以来,我总是以“够用就好”为理由,很少再维护过自己的一键打包的项目.最近接触了棱镜的sdk,感觉将apk包上传到棱镜服务器,后台来进行分包这种简单的方式很招人待见. 原理似乎不难,apk即zip压 ...