前面我们说了一种利用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. JanusGraph入门,schema及数据模型

    5.Schema和数据建模 每个JanusGraph都有一个schema,该schema由edge labels,property keys,和vertex组成.JanusGraph schema可以 ...

  2. 装ubuntu的坑

    装ubuntu安装盘的U盘,在BOOT中会出现两种载入方式,切记不要用UEFI方式打开,否则安装ubuntu会在最后卡在GRUB的安装上面,然后失败.

  3. html--前端JavaScript基本内容

    一.JavaScript 变量 在 JavaScript 中创建变量通常称为"声明"变量. 使用 var 关键词来声明变量. 注意: 1.变量必须以字母开头 2.变量也能以 $ 和 ...

  4. 【电脑】xshell报:需要Xmanager软件来处理X11转发请求

    https://www.netsarang.com/zh/xmanager/ 下载了就好了 我的图片出不来,下了就好了.

  5. no applicable action for [springProfile], current ElementPath is [[configuration][springProfile]]

    今天down了一个开源项目,启动后一直存在如下错误信息: ERROR in ch.qos.logback.core.joran.spi.Interpreter@26:42 - no applicabl ...

  6. CF1245E:Hyakugoku and Ladders

    CF1245E:Hyakugoku and Ladders 题意描述: 给你一个\(10*10\)的矩阵,矩阵描述如下 最开始的时候你在左下角,你的目标是到达左上角. 你可以走路径或者爬梯子. 路径的 ...

  7. ESA2GJK1DH1K升级篇: 升级STM32 预热: 单片机每隔一定时间 使用 http 获取天气

    前言: 实现功能概要: STM32使用AT指令控制Wi-Fi以TCP方式连接服务器(YY天气Web服务器),然后使用http的get协议获取今天的天气数据 单片机提取今天的温度和湿度数据,把温湿度数据 ...

  8. django -- 模版语言之过滤器Filters和for循环

    前戏 在前面写的图书管理系统中,我们对模版语言应该已经不陌生了,使用{{ }}包裹起来的就是模版语言,只需要记住两种就可以了 {{ 变量名 }}            变量相关的 {% %}      ...

  9. 第10组 Beta冲刺(1/4)

    队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作剩余界面前端 展示GitHub当日代码/文档签入记录 ...

  10. springboot做api服务时不使用thymeleaf的相关警告DefaultTemplateResolverConfiguration 的消除

    springboot在不配置thymeleaf相关属性的情况下,会提示如下的问题 DefaultTemplateResolverConfiguration - Cannot find template ...