前面我们说了一种利用input框和js的当时获取本地文件内容的情况-详细信息参考 2017年11月8日前端用js获取本地文件的内容

以上方式获取的按钮是系统默认的显示,有时候我们需要对按钮的外观进行美化。具体的方式如下:

<a href="javascript:;" >
<input  type="file"  onchange="upload(this)" />
<img src="assets/common/img/riskControl/icon_upload_small.png" />
<span class="upload_common_span" id="resultsapn_upload_userid">点击这里上传文件</span>
</a>

js代码没有变化,这里只讲html的代码, input 还是需要保持不变,添加了a标签和img和span标签 ,img负责修改上传前后的图片显示问题,你可以根据自己的喜好选择上传前后的图片,span用来显示前后的提示信息,这些都是根据需要可以删除掉的

唯一不能删除的就是a和input 。其他的根据情况显示即可。

前端获取文件input框的美化操作的更多相关文章

  1. 文件input框选择图片实时显示小技巧

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于前端滚动条,input框等样式的修改

    1.改变滚动条的样式 .orderList::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.o ...

  3. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

  4. 单个input框上传多个文件操作

    HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...

  5. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

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

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

  7. Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

    元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...

  8. Web 在线文件管理器学习笔记与总结(11)获取文件夹信息 (12)返回上一级操作

    (11)获取文件夹信息 文件夹没有修改操作. index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...

  9. 基于js-spark-md5前端js类库,快速获取文件Md5值

    js-spark-md5是歪果仁开发的东西,有点多,但是我们只要一个js文件即可,具体类包我存在自己的oschina上,下载地址:https://git.oschina.net/jianqingwan ...

随机推荐

  1. AcWing 38. 二叉树的镜像

    习题地址 https://www.acwing.com/solution/acwing/content/2922/ 题目描述输入一个二叉树,将它变换为它的镜像. 样例 输入树: / \ / \ / \ ...

  2. VIJOS-P1446 最短路上的统计

    JDOJ 1523: VIJOS-P1446 最短路上的统计 JDOJ传送门 Description 一个无向图上,没有自环,所有边的权值均为1,对于一个点对(a,b),我们要把所有a与b之间所有最短 ...

  3. 简述 gevent模块的作用和应用场景。

    当一个greenlet遇到IO操作时,比如访问网络,就自动切换到其他的greenlet,等到IO操作完成, 再在适当的时候切换回来继续执行.由于IO操作非常耗时,经常使程序处于等待状态, 有了geve ...

  4. 生成随机文件名JS

    export default function (length) { const data = ["0", "1", "2", " ...

  5. win +R

    一.电脑设置免登录密码及修改密码 1.win+R 2.输入control userpasswords2 3.勾选免密码账号登陆,修改密码 二.打开性能监视器 1.win+R 2.输入perfmon.e ...

  6. 说几条JavaScript的基本规范

    1.不要在同一行声明多个变量 2.使用===或!==来比较 3.使用字面量的方式来创建对象.数组,替代new Array这种形式 4.不要使用全局函数 5.switch语句必须要带default分支 ...

  7. 凤翔中学高三数学[备课&作业]

    #tab{ font-size:22px ;font-family:楷体;text-align:center;} a:link { text-decoration: none;} 凤中2020届高三文 ...

  8. Elasticsearch的null values

    很多时候,我们需要面临null值的烦扰,查询es时传入null值是要查询出null的数据还是不查这个field呢,稍有不慎就会引发新的bug,这的确是个问题! null_value 意味着无法索引或搜 ...

  9. eclipse中自动生成serialVersionUID

     serialVersionUID作用:  序列化时为了保持版本的兼容性,即在版本升级时反序列化仍保持对象的唯一性.       如果你修改代码重新部署后出现序列化错误,可以考虑给相应的类增加seri ...

  10. 箭头函数可不用return直接将表达式作为函数返回值

    箭头函数如果函数体只有一个表达式,那么表达式将作为函数的返回值,这种写法无须加上return关键字, 看下面两个函数定义 var testAf = () => '111'; var testAf ...