input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件，但是没用过，今天初次用，总感觉默认样式怪怪的，想修改一下，于是折腾了半天，总算是小有收获。
以上是默认样式，这里我想小小的修改下：
HTML代码如下：
<form action="" name="file" class="file">
上传文件<input type="file" id="img" name="img">
</form>
css代码如下：
<style>
.file{
width: 75px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: green;
position:relative;
}
.file input{
width: 75px;
height: 25px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
left:0;
top:0;
}
</style>
更改后，效果如下（样式很丑，这里主要是阐述下怎么更改input[type=file]默认样式的）
下面来说下使用input[type=file]上传图片实现预览效果的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.file{
width: 75px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: green;
position:relative;
}
.file input{
width: 75px;
height: 25px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<form action="" name="file" class="file">
上传文件
<input type="file" id="img" name="img">
</form>
<div id="dd"></div>
<script>
var file = document.getElementById("img");
file.onchange = function(){ // 文本框内容改变时触发
var files = this.files; // 获取文件的数量
for(var i=0;i<files.length;i++){
readers(files[i])
}
}
function readers(fil){
var reader = new FileReader(); // 异步读取存储在用户计算机上的文件
reader.readAsDataURL(fil); // 开始读取指定的Blob对象或File对象中的内容
reader.onload = function(){
document.getElementById("dd").innerHTML += "<img src='"+reader.result+"'>"; // 添加图片到指定容器中
};
}
</script>
</body>
</html>
input[type=file]样式更改以及图片上传预览的更多相关文章
- html,图片上传预览，input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- js:s上次预览，上传图片预览，图片上传预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
随机推荐
- 转载|chrome developer tool—— 断点调试篇
断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...
- ElasticSearch 学习记录之父子结构的查询
父子结构 父亲type属性查询子type 的类型 父子结构的查询,可以通过父亲类型的字段,查询出子类型的索引信息 POST /product/_search { "query": ...
- Nginx学习之配置RTMP模块搭建推流服务
写在开始 小程序升级实时音视频录制及播放能力,开放 Wi-Fi.NFC(HCE) 等硬件连接功能.同时提供按需加载.自定义组件和更多访问层级等新特性,增强了第三方平台的能力,以满足日趋丰富的业务需求. ...
- Robot Framework学习笔记（六）------RIDE界面说明
RIDE是一款专门用来编辑Robot Framework用例的软件,用Python编写并且开源. 1.测试项目.测试套件Edit 标签 测试项目和测试套件所提供的 Edit 标签的功能是一样的. 在 ...
- 安卓电量优化之WakeLock锁机制全面解析
版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.WakeLock概述 wakelock是一种锁的机制,只要有应用拿着这个锁,CPU就无法进入休眠状态,一直处于工作状态.比如,手机屏幕在屏幕关闭 ...
- python如何玩“跳一跳”！（windows安桌版本请进！）
最近"跳一跳",很火爆,有木有? 看了一下网上的教程,动作搭建了一下环境,就可以用脚本自动跑起来啦!!! 下面说一下android手机的实现过程: 首先,是python环境的搭建 ...
- http转https实战教程iis7.5
HTTP转HTTPS实战教程IIS7.5 (备注:确保IIS安装完成.ASP.NET 等配置无误) 1. 本文以阿里云为例,先在阿里云注册域名并且进行备案.备案完成后,在左侧菜单申请 ...
- c/c++ console(控制台)编程详解
前言: 控制台文本窗口的控制是基于win32 api(win32 api可理解为微软给我们提供的一系列函数的集合)实现的; 例1: #include <stdio.h>int main() ...
- vscode 开发工具
做开发两年了,而我记忆力不太好,所以写代码得靠强大的编辑器提示. 陆陆续续使用了如 notepad++.dreamweaver.sublime text.webstorm.phpstorm.Atom等 ...
- Twisted使用和scrapy源码剖析
1.Twisted是用Python实现的基于事件驱动的网络引擎框架. 事件驱动编程是一种编程范式,这里程序的执行流由外部事件来决定.它的特点是包含一个事件循环,当外部事件发生时使用回调机制来触发相应的 ...