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 相关文章推荐
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
javascript history对象详解
Feb 09 Javascript
常用的js方法合集
Mar 10 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
前端面试知识点目录一览
2019/04/15 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
django基础学习之send_mail功能
2019/08/07 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
办公室内勤工作职责
2013/12/11 职场文书
历史系自荐信范文
2013/12/24 职场文书
捐助倡议书范文
2014/04/15 职场文书
行政专员求职信范文
2014/05/03 职场文书
代理人委托书
2014/08/01 职场文书
自我管理的活动方案
2014/08/25 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2016教师国培研修感言
2015/12/08 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
创业计划书之寿司
2019/07/19 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
Spring 使用注解开发
2022/05/20 Java/Android