自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件:
- 第一,要自定义样式;
- 第二,要能直接在本地预览上传的图片;
- 第三,要能检测图片的尺寸是否符合要求。
故综合网上的资源写了下面的代码。思路说明持续补充中。。。
html
<div class="item" id="select-storeKeeper">
<span class="label"><b class="ftx04">*</b>身份证正面:</span>
<div class="uploadwrap">
<input type="file" id="idcard" name="idcard">
<input name="path" id="path" autocomplete="off" onpaste="return false;">
<input name="uploadbtn1" id="uploadbtn1" type="button" value="浏览文件" tabindex="4">
<span class="reminder">
<span class="myword">请上传身份证正面照片:</span>
<span class="mysize"> 宽224~264px,高132~186px</span>
</span>
</div>
</div>
<div id="idcardPreview" class="beforePre" >
<img src="" alt="idcard">
</div>
<div class="preWord" id="preWord1">(上传图片预览)</div>
js:
/********************图片预览********************/
function idcardPreview(args) {//idcard实际上传控件处理程序(即类型为type的input)
var inputObj=document.getElementById("idcard");
var imgPreview=document.getElementById("idcardPreview");
var imgSelf=document.querySelector("#idcardPreview img");
var uploadbtn=document.getElementById("uploadbtn1");
var path=document.forms["form0"].elements["path"];
var reminder=document.querySelector("#select-storeKeeper .reminder");
var preword=document.getElementById("preWord1");
imgSelf.onload=function(event){
if (imgSelf.style.width) {//如事先已有图片样式,则图片宽高样式得先去掉
imgSelf.style.width=null;
}
if (imgSelf.style.height) {
imgSelf.style.height=null;
}
var lw=243,lh=153;
var scale=1.6;
var rw=imgSelf.offsetWidth;
var rh=imgSelf.offsetHeight;
console.log("rw:"+rw+" "+"rh:"+rh);
var fw,fh;
if (rw/rh>2||rw/rh<1.2) {
removeClass(imgPreview,"preview");
preword.style.display="none";
path.style.display="none";//IE8-不认识setProperty
reminder.style.display="inline";
uploadbtn.style.left=null;
inputObj.value="";
alert("您的图片尺寸不合适,请更换图片\n请保证图片宽224~264px,高132~186px。");
}
else{
if (rw/rh>scale) {
fw=lw;
fh=rh/(rw/lw);
}
else if (rw/rh<scale) {
fh=lh;
fw=rw/(rh/lh);
}
else{
fh=lh;
fw=lw;
}
console.log("fw:"+fw+" "+"fh:"+fh);
imgSelf.style.width=fw+"px";
imgSelf.style.height=fh+"px";
preword.style.display="block";
path.value=inputObj.value;//显示文件路径
path.style.display="inline";//IE8-不认识setProperty
reminder.style.display="none";
uploadbtn.style.left="190px";
}
}
if (inputObj.files && inputObj.files[0]) {//IE11,IE10,Chrome,FF
addClass(imgPreview,"preview");
imgSelf.src=window.URL.createObjectURL(inputObj.files[0])
||inputObj.files[0].getAsDataURL();//火狐7以下
}
else{//IE10以下
inputObj.value="";
alert("您的浏览器版本过低,图片上传失败。\n请更换浏览器(ie10+或其他高级浏览器),谢谢!")
}
}
function addClass(elem,newclass) {//跨浏览器的样式添加函数
if (elem.classList) {
elem.classList.add(newclass);
}
else{
var classArr=elem.className.split(/\s+/);
classArr.push(newclass);
elem.className=classArr.join(" ");
}
}
function removeClass(elem,oldclass) {//跨浏览器的样式移除函数
if (elem.classList) {
elem.classList.remove(oldclass);
}
else{
var classArr=elem.className.split(/\s+/);
for (var i=0,len=classArr.length;i<len;i++) {
if (classArr[i]==oldclass) {
classArr.split(i,1);
break;
}
}
elem.className=classArr.join(" ");
}
}
function idcardClick() {//idcard形式上传按钮事件处理程序
document.forms["form0"].elements["idcard"].click();
}
window.onload=function(){
document.getElementById("uploadbtn1").onclick=idcardClick;
document.getElementById("idcard").onchange=idcardPreview;
}
自定义type为file型input控件+该控件具有本地图片预览功能的更多相关文章
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- input file样式修改,图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- html input type=file 选择图片,图片预览 纯html js实现图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- input[type="file"]的图片预览
在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...
- 浅谈简单实现file控件的图片预览,裁剪和上传。
1.图片预览之FileReader对象 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...
- 上传图片预览JS脚本 Input file图片预览的实现示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一段上传图片预览JS脚本,Input file图片预览的实现
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
随机推荐
- centos6安装nginx最详细步骤
第一步:在centos下面下载 nginx wget http://nginx.org/download/nginx-1.2.9.tar.gz 解压 tar zxf nginx-1. ...
- 我的Android进阶之旅------> Android为TextView组件中显示的文本添加背景色
通过上一篇文章 我的Android进阶之旅------> Android在TextView中显示图片方法 (地址:http://blog.csdn.net/ouyang_peng/article ...
- Jquery事件绑定的4中方式对比
bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click ...
- emmet缩写格式
2016年5月30日 10:10 标准网页<!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
- next()和nextLine()的区别
众所周知,在Java中输入字符串有两种方法,就是next()和nextLine(),今天研究了一下其中的区别. 首先,nextLine()的输入是碰到回车就终止输入,而next()方法是碰到空格,回车 ...
- shiro2
mapper接口:根据用户id查询用户权限的菜单 service接口:根据用户id查询用户权限的菜单 获取用户权限范围的url 思路: 在用户认证时,认证通过,根据用户id从数据库获取用户权限范围的u ...
- [原创]java WEB学习笔记38:EL 中的 11个 隐含对象 详解
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- 【三】MongoDB文档的CURD操作
一.插入文档 使用insert方法插入文档到一个集合中,如果集合不存在创建集合,有以下几种方法: db.collection.insertOne({}):(v3.2 new) #插入一个文档到集合中 ...
- springmvc的优化
二.springmvc的工作机制 在容器初始化时会建立所有url和controller的对应关系,保存到Map<url,controller>中.tomcat启动时会通知spring初始化 ...
- Oracle视图的使用
--视图的语法 create [ or replace ] [NO Force | Force] View schema.view_name--视图名称 [(alias,...)inline_cons ...