前面我们说了一种利用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. nginx proxy_pass 指令

    nginx proxy_pass 指令 文档 Nginx 官方文档 https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pa ...

  2. Scrapy笔记04- Selector详解

    Scrapy笔记04- Selector详解 在你爬取网页的时候,最普遍的事情就是在页面源码中提取需要的数据,我们有几个库可以帮你完成这个任务: BeautifulSoup是python中一个非常流行 ...

  3. 云服务器使用: 购买域名,域名绑定IP

    有没有不知道域名是什么的,但是大家一定知道访问域名就是访问绑定在域名上的IP地址 域名有个好处就是一个域名可以绑定多个IP. 举个例子:百度的域名是https://www.baidu.com/ 然后咱 ...

  4. 使用emplace操作

    C++ 11新标准中引入了三个新成员——emplace_front.emplace和emplace_back,这些操作构造而不是拷贝元素.这些操作分别对应push_front.insert和push_ ...

  5. K8s容器资源限制

    在K8s中定义Pod中运行容器有两个维度的限制: 1. 资源需求:即运行Pod的节点必须满足运行Pod的最基本需求才能运行Pod. 如: Pod运行至少需要2G内存,1核CPU    2. 资源限额: ...

  6. 51Nod1353 树

    51Nod1353 树 传送门 思路 我们定义\(dp[i][j]\)代表第i个点联通块大小为j的方案总数,也可以把它理解为等待分配(不确定归属)的联通块大小为j的方案总数. 那么每次转移我们就使用一 ...

  7. Spring Security教程(二)

    上一篇博客中,Spring Security教程(一),我把用户信息和权限信息放到了xml文件中,这是为了演示如何使用最小的配置就可以使用Spring Security,而实际开发中,用户信息和权限信 ...

  8. Java实现添加压缩文件

    package junittest; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStr ...

  9. [Gamma]Scrum Meeting#10

    github 本次会议项目由PM召开,时间为6月5日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...

  10. .net core 运行不需命令行

    1.问题情景: 需要保证已安装.net core SDK,并且命令提示符下运行“dotnet --version”,有反应. 如果之前运行良好,现在却不行了,查看安装程序中存在.net core SD ...