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解析获取JSON数据
Apr 08 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
详解jQuery设置内容和属性
Apr 11 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
基于mysql的bbs设计(一)
2006/10/09 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
VueJS全面解析
2016/11/10 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
身边的榜样活动方案
2014/08/20 职场文书
环境卫生倡议书
2014/08/29 职场文书
大学生简短的自我评价
2014/09/12 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS