选择本地文件上传控件 input标签
当要通过控件来选择本地文件上传的时候的一种方式
<input type="file" id="input-file"/> 注意 type类型一定要是 file
当年选择文件之后,就用 this.file[0] 来获得文件的基本信息
下面为项目中的应用
html <div class="upload-button">
<span style="position: absolute;text-align: center;width: 135px;left:0;">上传封面图片</span>
<input type="file" id="input-file"/>
</div>
js // 获取本地图片信息
$("#input-file").on("change", function() {
// this.file[0] 得到文件的基本信息
var fileName = this.files[].name;
var url = 'img/'+fileName
// 打印原始File对象
console.log(fileName)
console.log(url);
打印出来的数据为
再要注意的就是input框的样式真的不好看啊,如需要改变样式就要加CSS,一定要把input样式定位 position:absolute ,透明度为0,再用一个span标签覆盖起来
.upload-button{
position: relative;
float: right;
background: #fa4a5f;
height: 40px;
font-size: 19px;
color:#fff;
width: 135px;
line-height: 40px;
text-align: center;
margin-top:25px;
border-radius:20px;
box-shadow:#fa4a5f 30px;
cursor: pointer;
overflow: hidden;
display: inline-block;
}
#input-file{
opacity: ;
position: absolute;
cursor: pointer;
}
效果图如下
选择本地文件上传控件 input标签的更多相关文章
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
- 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)
引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify(转)
原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- 对FileUpload文件上传控件的一些使用方法说明
//创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
- 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...
随机推荐
- knockout 简单使用
定义: var QcViewModel = function () { var self = this; self.name = ko.observable(); self.qty = ko.obse ...
- Dart语言学习(十四) Dart泛型
什么是泛型? 通俗理解:泛型就是解决 类 接口 方法的复用性.以及对不特定数据类型的支持(类型校验) 如下代码,只能返回string类型的数据 String getData(String value) ...
- python - 关于json和pickle两个序列化模块的区别
传送门 https://stackoverflow.com/a/20980488/5955399 区别 json:用于字符串(unicode text)和python基本数据类型间进行转换.优点:跨语 ...
- Python 使用pillow 操作图像
文档:https://pillow.readthedocs.io/en/stable/index.html 计算机图像基础 颜色和RGBA值 计算机程序通常将图像中的颜色表示为 RGBA 值.RGBA ...
- selenium webdriver 常用方法
/** * 判断元素是否存在 * * @param driver * @param by * @return */ public static boolean isElementPresent(Web ...
- hbase单机版安装
hbase单机版安装 1. hbase单机版安装 HBase的安装也有三种模式:单机模式.伪分布模式和完全分布式模式. hbase依赖于Hadoop和Zookeeper. 这里安装的是单机版 ...
- 牛顿迭代法--求任意数的开n次方
牛顿迭代法是求开n次方近似解的一种方法,本文参考. 引言 假如\(x^n = m\),我们需要求x的近似值. 我们设\(f(x) = x^n - m\), 那么也就是求该函数f(x)=0时与x轴的交点 ...
- Python数据类型-1 数据类型介绍
数据类型 在python这门语言中,数据类型分为两种. 内置的和自定义的. 内置的包括数字.字符串.布尔.列表.元组.字典.Bytes.集合这些常用的以及一些不太常用的数据类型.而自定义的,一般以类的 ...
- Java 自定义DateUtils
1 /* Date d = new Date(); String s = DateUtils.DateToString(d, "yyyy-MM-dd HH:mm:ss"); Sys ...
- 【PAT甲级】1036 Boys vs Girls (25 分)
题意: 输入一个正整数N(题干没指出范围,默认1e5可以AC),接下来输入N行数据,每行包括一名学生的姓名,性别,学号和分数.输出三行,分别为最高分女性学生的姓名和学号,最低分男性学生的姓名和学号,前 ...