input file样式修改以及图片预览删除功能详细概括(推荐)


Posted in Javascript onAugust 17, 2017

本篇对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浏览器则没有,它完整的显示了文件路径,下图可看出。

谷歌浏览器:input file样式修改以及图片预览删除功能详细概括(推荐)

IE浏览器: input file样式修改以及图片预览删除功能详细概括(推荐)

还有另外一种方式,通过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.图片预览功能的实现,这里又分两种方法。

好了,到这里这篇就写完了,希望对你有所帮助。

Javascript 相关文章推荐
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
js表单验证实例讲解
Mar 31 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
bootstrap table实例详解
Jan 06 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 #Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 #Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
vue中appear的用法
Aug 17 #Javascript
Angularjs单选框相关的示例代码
Aug 17 #Javascript
js实现简易聊天对话框
Aug 17 #Javascript
You might like
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python使用django搭建web开发环境
2017/06/09 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Python是怎样处理json模块的
2020/07/16 Python
用python制作个视频下载器
2021/02/01 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
商务英语专业毕业生自荐信
2013/11/05 职场文书
开业庆典策划方案
2014/02/18 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
明星员工获奖感言
2014/08/14 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2016年国培研修日志
2015/11/13 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python