前端获取文件input框的美化操作
前面我们说了一种利用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框的美化操作的更多相关文章
- 文件input框选择图片实时显示小技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于前端滚动条,input框等样式的修改
1.改变滚动条的样式 .orderList::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.o ...
- js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)
原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...
- 单个input框上传多个文件操作
HTML页面: <div class="form-group thumb"> <label class="control-label col-xs-12 ...
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
- javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载
元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_ele ...
- Web 在线文件管理器学习笔记与总结(11)获取文件夹信息 (12)返回上一级操作
(11)获取文件夹信息 文件夹没有修改操作. index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...
- 基于js-spark-md5前端js类库,快速获取文件Md5值
js-spark-md5是歪果仁开发的东西,有点多,但是我们只要一个js文件即可,具体类包我存在自己的oschina上,下载地址:https://git.oschina.net/jianqingwan ...
随机推荐
- JMeter3.0及JMeter5.1开发WebService接口脚本(soap取样器 & http取样器)
由于5.1没有soap取样器了,所以用3.0演示. WebService接口信息 WebService接口地址:http://www.webxml.com.cn/WebServices/Weather ...
- python 通过scapy获取网卡列表
python通过scapy 获取网卡列表如下: #coding:utf-8 from scapy.all import * #显示网卡信息 show_interfaces() 运行结果如下:
- hdu5285-wyh2000 and pupil-(染色法二分图判定)
http://acm.hdu.edu.cn/showproblem.php?pid=5285 题意:把互不认识的人分到两个组,第一组人数尽可能多. 题解:把互不认识的人连起来,当作二分图,二分图可能有 ...
- C语言实现Socket简单通信
环境是linux,不过应该没什么影响,因为只用到了socket的基本用法,没有涉及pthread等. 分为服务器端和客户端,服务器端监听端口发来的请求,收到后向客户端发送一个Hello World,客 ...
- loj2245 [NOI2014]魔法森林 LCT
[NOI2014]魔法森林 链接 loj 思路 a排序,b做动态最小生成树. 把边拆成点就可以了. uoj98.也许lct复杂度写假了..越卡常,越慢 代码 #include <bits/std ...
- 三天精通Vue--学前摘要
Vue Vue是一个前端框架,中文学习教程https://cn.vuejs.org/v2/guide/components.html 学习的前提:一点的 HTML+CSS+js node.js是前端的 ...
- swig包里面没有找到swig.exe
问题关键词: swig.exe找不到 swig.exe不存在 windows如何编译swig.exe windows如何生成swig.exe SWIG简单介绍: SWIG(http://www.swi ...
- linux中用一个.sh文件执行多个.sh文件
建一个文件夹存放你自己的.sh文件(用命令行操作) 先进入到: cd usr/local/sbin 目录里面 然后再新建一个文件夹: sudo mkdir myshell 建一个文件夹专门存放自己 ...
- .NET Core如何使用NLog
1.新建ASP.NET Core项目 1.1选择项目 1.2选择.Net版本 2. 添加NLog插件 2.1 通过Nuget安装 2.2下载相关的插件 3.修改NLog配置文件 3.1添加NLog配置 ...
- MVVM模式理解(转)
原文https://www.cnblogs.com/goloving/p/8520030.html MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心 ...