jQuery实现input[type=file]多图预览上传删除等功能


Posted in jQuery onAugust 02, 2019

下面我们了解一下,多图上传时,怎么实现预览、上传、删除等功能。下图是功能实现的预览效果,虽然样式有点丑,不过功能还是实现了。话不多说,直接看代码会更直观一些。

jQuery实现input[type=file]多图预览上传删除等功能

首先定义一下基本格式,样式代码自行脑补:

<body>
 <div class="upload-header">
 <input id="upload" type="file" accept="image/*" multiple="multiple">
 <button class="btn">点击上传</button>
 </div>
 <div class="img-box">
 <!-- 存放预览图片 -->
 </div>
</body>

接着定义看一下具体的js实现代码,我是基于JQ做的开发,方便DOM的操作。

1. 预览功能的实现

这里监听input[type=file]的change事件,在回调函数中,取到暂存区的文件e.target.files,通过遍历files 文件属性,使用FileReader 函数读取文件的值,然后使用append方法把图片放入指定盒子中。备注::FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。

imgPreview: function () {
 var that = this;
 $('.upload-header').on('change', '#upload', function(e) {
  var files = e.target.files;
  if (files.length > 0) {
  for (var i = 0; i < files.length; i++) {
   var reader = new FileReader();
   reader.onload = function () {
   var text = `
    <div class="img-list">
    <img src="${this.result}" alt="">
    <div class="del-img">删除</div>
    </div>
   `
   $('.img-box').append(text);
   };
   reader.readAsDataURL(files[i]);
   that.filesList.push(files[i]);
  };
  };
 })
 }

2. 图片删除功能

这里是使用on方法对预览的图片添加点击事件,这里使用on方法主要是因为on方法对后面添加的dom可以继续监听。当需要删除照片时,直接删除其图片的父节点及以下节点就可以了。此时记得把暂存区的文件filesList也要对应删除。

delImage: function () {
 var that = this;
 $('.img-box').on('click', '.del-img', function () {
  var delStatus = confirm('确认这张图片删除吗?');
  if (delStatus) {
  var index = $(this).parent().index();
  $(this).parent().remove();
  that.filesList.splice(index, 1);
  console.log('我删除啦', index);
  };
 });
 }

2. 图片批量上传功能

图片上传我定义了两个方法,第一方法是点击上传后,对所有文件进行遍历,依次调取上传的方法(因为用的七牛上传工具,只支持单个文件上传,所以采取了遍历的方式)。第二个方法使用了jq的ajax的post上传方式,使用FormData实例,添加file属性进行上传。因为是批量上传,所以我使用了定义临时变量flag 的方式来判断文件是否都上传完成,当flag的值与filesList的数量一致时,就可以判断所有上传完成。使用方法比较low,如果其他好的方法可以留言交流。

clickUpload: function () {
 var that = this;
 var filesList = this.filesList;
 $('.btn').on('click', function() {
 that.flag = 0;
 if (filesList.length > 0) {
  for (var i = 0; i < filesList.length; i++) {
  that.upLoadMethod(filesList[i]);
  }
 };
 }) 
},
upLoadMethod: function (file) {
 var that = this;
 var formData = new FormData();
 formData.append('file', file);
 $.ajax({
  type: "post",
  url: 'http://172.16.1.99:8703/file/upload',
  data: formData,
  mimeType: "multipart/form-data",
  dataType: "json",
  async: false,
  cache: false, //上传文件不需要缓存
  contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
  processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
  success: function (response) {
  that.flag += 1;
  if (that.flag === that.filesList.length) {
   console.log('我上传完成了');
  };
  },
  error: function (err) {
  console.log('上传失败');
  }
 });
 },

以下是完整的js代码,供参考:

<script>
 function UploadFunction (name) {
 this.name = name;
 this.init();
 };
 UploadFunction.prototype = {
 // 初始化
 init: function () {
  this.clickUpload();
  this.imgPreview();
  this.delImage();
 },
 flag: 0,
 filesList: [],
 // 点击上传
 clickUpload: function () {
  var that = this;
  var filesList = this.filesList;
  $('.btn').on('click', function() {
  that.flag = 0;
  if (filesList.length > 0) {
   for (var i = 0; i < filesList.length; i++) {
   that.upLoadMethod(filesList[i]);
   }
  };
  }) 
 },
 imgPreview: function () {
  var that = this;
  $('.upload-header').on('change', '#upload', function(e) {
  var files = e.target.files;
  console.log(files);
  if (files.length > 0) {
   for (var i = 0; i < files.length; i++) {
   var reader = new FileReader();
   reader.onload = function () {
    var text = `
    <div class="img-list">
     <img src="${this.result}" alt="">
     <div class="del-img">删除</div>
    </div>
    `
    $('.img-box').append(text);
   };
   reader.readAsDataURL(files[i]);
   that.filesList.push(files[i]);
   };
  };
  })
 },
 upLoadMethod: function (file) {
  var that = this;
  var formData = new FormData();
  formData.append('file', file);
  $.ajax({
  type: "post",
  url: '这里使用上传的地址/upload',
  data: formData,
  mimeType: "multipart/form-data",
  dataType: "json",
  async: false,
  cache: false, //上传文件不需要缓存
  contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
  processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
  success: function (response) {
   that.flag += 1;
   if (that.flag === that.filesList.length) {
   console.log('我上传完成了');
   };
  },
  error: function (err) {
   console.log('上传失败');
  }
  });
 },
 delImage: function () {
  var that = this;
  $('.img-box').on('click', '.del-img', function () {
  var delStatus = confirm('确认这张图片删除吗?');
  if (delStatus) {
   var index = $(this).parent().index();
   $(this).parent().remove();
   that.filesList.splice(index, 1);
   console.log('我删除啦', index);
  };
  });
 }
 }
 var UploadFunction = new UploadFunction('小明删照片');

总结

以上所述是小编给大家介绍的jQuery实现input[type=file]多图预览上传删除等功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
简单实现jQuery弹幕效果
May 06 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
jquery.pager.js分页实现详解
Jul 29 #jQuery
jquery.pager.js实现分页效果
Jul 29 #jQuery
You might like
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
小学一年级学生评语
2014/04/22 职场文书
青安岗事迹材料
2014/05/14 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
锦旗赠语
2015/06/23 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书