input file样式修改以及图片预览删除功能详细概括(推荐)
时间:2019-03-31
本文章向大家介绍input file样式修改以及图片预览删除功能详细概括(推荐),主要包括input file样式修改以及图片预览删除功能详细概括(推荐)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能。
效果图如下:
这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这块儿的可以在自己添加修改。
<!--点击预览图片--> <div class="picDiv"> <div class="addImages"> <!--multiple属性可选择多个图片上传--> <input type="file" class="file" id="fileInput" multiple accept="image/png, image/jpeg, image/gif, image/jpg" /> <div class="text-detail"> <span>+</span> <p>点击上传</p> </div> </div> </div>
这里需要注意下:如果在input file 标签里写成accept=“image/*”会造成点击按钮后等待时间稍长才会弹出选择文件框,所以写成
accept="image/png, image/jpeg, image/gif, image/jpg"
css代码
.imageDiv{ display: inline-block; width: 140px; height: 125px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px dashed darkgray; background: #f8f8f8; position: relative; overflow: hidden; } .cover{ position: absolute; z-index: 1; top: 0; left: 0; width: 140px; height: 125px; background-color: rgba(0,0,0,.3); display: none; line-height: 125px; text-align: center; cursor: pointer; } .cover>.delbtn{ color: red; font-size: 20px; } .imageDiv:hover .cover{ display: block; } .addImages{ display: inline-block; width: 140px; height: 125px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px dashed darkgray; background: #f8f8f8; position: relative; overflow: hidden; } .text-detail{ margin-top: 40px; text-align: center; } .text-detail>span{ font-size: 40px; } .file{ position: absolute; top: 0; left: 0; width: 140px; height: 125px; opacity: 0; }
里边的加号或者删除字样都可以用成字体或者图片,看自己公司需要。
javascript代码
第一种方式:createObjectURL
//图片上传预览功能 var userAgent = navigator.userAgent;//用于判断浏览器类型 $(".file").change(function () { //获取选择图片的对象 var docObj =$(this)[0]; var picDiv=$(this).parents(".picDiv"); //得到所有的图片文件 var fileList = docObj.files; //循环遍历 for (var i = 0; i < fileList.length; i++) { //动态添加html元素 var picHtml="<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>" picDiv.prepend(picHtml); //获取图片imgi的对象 var imgObjPreview = document.getElementById("img"+fileList[i].name); if (fileList && fileList[i]) { //图片属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '140px'; imgObjPreview.style.height = '125px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要以下方式 if(userAgent.indexOf('MSIE') == -1){//IE以外浏览器 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径 }else{//IE浏览器 if(docObj.value.indexOf(",")!=-1){ var srcArr=docObj.value.split(","); imgObjPreview.src = srcArr[i]; }else{ imgObjPreview.src = docObj.value; } } } } }); /*删除功能*/ $(document).on("click",".delbtn",function () { console.log("click") var _this=$(this); _this.parents(".imageDiv").remove(); });
这里有浏览器判断,因为IE和谷歌,火狐等浏览器不同,后两者对于文件路径有浏览器保护,不会显示全文件路径,而IE浏览器则没有,它完整的显示了文件路径,下图可看出。
谷歌浏览器:
IE浏览器:
还有另外一种方式,通过filereader方式预览图片。
JavaScript代码
第二种方式:filereader
$(".file").change(function () { //获取选择图片的对象 var docObj =$(this)[0]; var picDiv=$(this).parents(".picDiv"); //得到所有的图片文件 var fileList = docObj.files; for(var i=0;i<fileList.length;i++){ var fr = new FileReader(); var single=fileList[i]; fr.onload = function(single) { var picHtml = "<div class='imageDiv' > <img id='img" + single.name + "' src='" + single.target.result + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>" picDiv.prepend(picHtml); var imgObjPreview = document.getElementById("img" + single.name); //图片属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '140px'; imgObjPreview.style.height = '125px'; }; fr.readAsDataURL(single); } }); /*删除功能*/ $(document).on("click",".delbtn",function () { console.log("click") var _this=$(this); _this.parents(".imageDiv").remove(); });
另外,删除功能的js代码可以如上面代码一样写在外边,也可以写在change事件for循环外,这样就不用on,可以直接以删除按钮的class来写了,如:
//图片上传预览功能 var userAgent = navigator.userAgent;//用于判断浏览器类型 $(".file").change(function () { //获取选择图片的对象 var docObj =$(this)[0]; var picDiv=$(this).parents(".picDiv"); //得到所有的图片文件 var fileList = docObj.files; //循环遍历 for (var i = 0; i < fileList.length; i++) { //动态添加html元素 var picHtml="<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>" picDiv.prepend(picHtml); //获取图片imgi的对象 var imgObjPreview = document.getElementById("img"+fileList[i].name); if (fileList && fileList[i]) { //图片属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '140px'; imgObjPreview.style.height = '125px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要以下方式 if(userAgent.indexOf('MSIE') == -1){//IE以外浏览器 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径 }else{//IE浏览器 if(docObj.value.indexOf(",")!=-1){ var srcArr=docObj.value.split(","); imgObjPreview.src = srcArr[i]; }else{ imgObjPreview.src = docObj.value; } } } } /*删除功能*/ $(".delbtn").click(function () { var _this=$(this); _this.parents(".imageDiv").remove(); }); });
此篇主要体现了两点:
1.input file 按钮改成自己想要的样式,就是将原本的input隐藏,用另一个标签<a>,<button>,<div>......代替,css控制他们加上自己需要的样式就可以了;
2.图片预览功能的实现,这里又分两种方法。
好了,到这里这篇就写完了,希望对你有所帮助。
- BTC.com时讯-IBM等老牌大企业因区块链技术获得新活力
- Kit 3D 更新
- Enterprise Library深入解析与灵活应用(5):创建一个简易版的批处理执行器,认识Enterprise Library典型的配置方式和对象创建方式
- 晚上好啊!这是今天人工智能精选要闻
- 构建Flex应用的10大误区
- Flex的起步推动新语言学习
- 简单科普云计算相关内容
- Silverlight初级教程-开发工具
- WCF的Binding模型之五:绑定元素(Binding Element)
- 2018年物联网发展趋势
- Silverlight初级教程-概述
- WCF的Binding模型之四:信道工厂(Channel Factory)
- 如何做一个好的前端重构工程师
- 云计算是否真的对企业来说无所不能?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信公众号开发者模式介绍及接入
- SpringBoot2.x整合MyBatis
- 使用微信测试账号对网页进行授权
- Spring JMS的使用
- 使用Java编写ActiveMQ的队列模式和主题模式
- 安装ActiveMQ
- Spring Cloud Zuul 快速入门
- Spring Cloud 集成 RabbitMQ
- SpringBoot2.x集成Apache Shiro并完成简单的Case开发
- Spring Security权限框架理论与简单Case
- leetcode树之N叉树的前序遍历
- Spring Security 中的 hasRole 和 hasAuthority 有区别吗?
- python常见的import导包技巧
- 真正了解贪心算法,这是一篇精华入门总结...
- MGR修改max_binlog_cache_size参数导致异常