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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
js添加绑定事件的方法
May 15 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python help()函数用法详解
2014/03/11 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
python默认参数调用方法解析
2020/02/09 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
小加工厂管理制度
2014/01/21 职场文书
顶碗少年教学反思
2014/02/21 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
mysql部分操作
2021/04/05 MySQL