前面我们说了一种利用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. opencart忘记登录密码怎么办

    今天一位客户问opencart忘记登录密码怎么办,他们公司内部有几位员工同时在管理,可能是哪位同事把密码给改了没有跟大家说,现在都登录不了.这个只能数据库修改了.进入opencart的数据库,找到oc ...

  2. openpose开发(1)官方1.5版本源码编译

    环境 WIN10系统,联想Y7000配置,8G内存 VS2019 cuda10 cudnn10 opencv4.11没有扩展库 显卡 1050TI 用到的库(提前下载好的模型,依赖库,user_cod ...

  3. MySQL基于 amoeba.xml的读写分离

    1.准备两台服务器  centos7 192.168.52.35 192.168.52.36 2.关闭防火墙 [root@localhost ~]# systemctl stop firewalld ...

  4. webpack的一些坑

    最近自己着手做一个小的Demo需要webpack,目前版本号是4.41.2,想使用的版本是3.6.0,因3x版本和4x版本很多地方不同,所以在安装过程中也是很多坎坷,下面是遇到的一些坑,和一些解决办法 ...

  5. No module named 'requests_toolbelt'

    pip install requests-toolbelt

  6. SQL数据同步到ELK(一)- 日常开篇

    需求 在我们的实际业务中,业务数据大部分是通过传统DB做持久化,但有时会使用Solr/Elastic Search等做搜索.缓存等其他服务,那么如何将数据同步到这些异构的存储系统中呢? 这就是我最近在 ...

  7. linux 系统时间 EST CST

    早上本来要做一些实验的,基于时间的.date 查看时间,发现时间不对.用 pool.ntp.org 去同步发现时间还是一样的,并且没有报错.如是开启另外一台时间对的linux服务器进行对比.发现一个是 ...

  8. go 优秀文档

    go语言资料汇总 : https://blog.zhnytech.com/articles/2016/07/15/Golang%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99% ...

  9. Alpha冲刺(10/10)——2019.5.2

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 ...

  10. Atlassian JIRA 插件开发之三 创建

    之前的都是准备,真正的插件是从这里开始的 参考:https://developer.atlassian.com/server/framework/atlassian-sdk/modify-the-pl ...