前面我们说了一种利用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. 【Tomcat】系统找不到指定的路径

    确认一下端口防火墙是否开放 没开放就开一下:firewall-cmd --zone=public --add-port=9080/tcp --permanent 然后重启: firewall-cmd ...

  2. 【java】定时任务停止时间设置

    我的需求:每天9点至20点运行 解决办法:@Scheduled(cron = "0 * 9,10,11,12,13,14,15,16,17,18,19 * * ?") 解释:  逗 ...

  3. 【java】int与bigdecimal的相互转换

    int转bigdecimal BigDecimal number = new BigDecimal(0); int value=score; number=BigDecimal.valueOf((in ...

  4. plv8 require 模块试用

    plv8 是postgres 的一个比较强大的插件,社区有人基于babel,browserify 实现了一个方便的require 模块加载 实际上官方也有介绍过了类似的基于数据库存储js,然后通过ev ...

  5. 【数论】[圆点坐标]P2508圆上的整点

    题目描述 求一个给定的圆\(x ^2 +y ^2 = r ^2\),在圆周上有多少个点的坐标是整数 Solution 圆上的点坐标通解:\(x = d\frac{v^2-u^2}{2},y = duv ...

  6. Gamma阶段第九次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...

  7. 图、流程图、ER图怎么画及常见画图工具(流程图文章汇总)

    流程图基本符号 首先要记住图中1.2.3.4.6这几种符号. 图片摘自网络 流程图基本概念及入门 简易流程图 流程图简介(基本符号与绘制工具) 你可能学了假流程图,三步教会你绘制大厂流程图 使用流程图 ...

  8. 【操作系统之三】Linux下进程间通信-IPC(Inter-Process Communication)

    管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允许无亲缘关系进程间的通信:信号(Sign ...

  9. SQLServer ---------- 安装SQLserver数据库

    1.安装SQLserver 数据2008 的地址 https://jingyan.baidu.com/article/948f592434b407d80ef5f97d.html?qq-pf-to=pc ...

  10. unity的yield

    这里说的是Unity通过StartCoroutine开启IEnumerator协程里的yield相关 1.yield return 0,yield return null 等待下一帧接着执行下面的内容 ...