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获取table下某一行某一列的值实现代码
Apr 07 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
在node中如何使用 ES6
2017/04/22 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
vue实现弹幕功能
2019/10/25 Javascript
npm qs模块使用详解
2020/02/07 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python实现维吉尼亚加密法
2019/03/20 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
如何利用python生成MD5并去重
2020/12/07 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
司仪主持词两篇
2014/03/22 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL