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实现div跟随鼠标移动
Aug 20 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP中使用BigMap实例
2015/03/30 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
javascript实用方法总结
2015/02/06 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
用python写爬虫简单吗
2020/07/28 Python
Python 读取位于包中的数据文件
2020/08/07 Python
浅析python实现动态规划背包问题
2020/12/31 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
应届生骨科医生求职信
2013/10/31 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
后勤主管岗位职责
2014/03/01 职场文书
毕业生实习证明
2014/09/19 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
后勤工作个人总结
2015/02/28 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP