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 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
模拟select的代码
Oct 19 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue中监听返回键问题
Aug 28 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
微信小程序滚动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自动更新新闻DIY
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php模板中出现空行解决方法
2011/03/08 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
js中this对象用法分析
2018/01/05 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python单例模式的两种实现方法
2017/08/14 Python
python实现定时提取实时日志程序
2018/06/22 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python如何将多个PDF进行合并
2019/08/13 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
CSS3 边框效果
2019/11/04 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
协议书怎么写
2014/04/21 职场文书
初婚未育证明样本
2014/10/24 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
感恩主题班会教案
2015/08/12 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP