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 相关文章推荐
文字幻灯片
Jun 26 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
JS实现分页导航效果
Feb 19 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实现分页工具类分享
2014/01/09 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
python中__call__方法示例分析
2014/10/11 Python
python中as用法实例分析
2015/04/30 Python
Android分包MultiDex策略详解
2017/10/30 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Python Merge函数原理及用法解析
2020/09/16 Python
python 实用工具状态机transitions
2020/11/21 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
航海技术专业毕业生求职信
2014/04/06 职场文书
企业文化宣传标语
2014/06/09 职场文书
名人演讲稿范文
2014/09/16 职场文书
教师素质教育心得体会
2016/01/19 职场文书
餐厅开业活动方案
2019/07/08 职场文书