图片上传,预览以及图片删除
背景
前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能的时候,参考了很多网上的代码 , 现在就单独写一篇博客来记录下实现的整个过程,以及在做的过程中遇到的一些坑。
先来看下实现的最后效果:
首先先创建好一个用于展示预览图片及上传按钮的div,content-img-list用于动态展示预览图片,file用于显示上传按钮
<div class="content-img"><ul class="content-img-list"><!-- <li class="content-img-list-item"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><a class="delete-btn"><i class="ico-delete"></i></a></li> --></ul><div class="file"><i class="ico-plus"></i>上传图片,支持jpg/png<input type="file" name="file" accept="image/*" id="upload" ></div> </div>
复制代码
上传按钮美化
默认input type=file的上传按钮非常的丑陋,实现自定义上传按钮样式,这里主要通过设置input的透明度将它设置为opacity: 0;
图片上传实现步骤
图片上传
通过jquery监听input change事件,这样我们可以获取到上传的图片流信息,从而可以获取到图片的地址、大小、格式以及名称等信息
这里创建3个数组,imgName、imgSrc、imgFile分别用于存放上传图片的名称、url地址以及图片流信息
var fileList = this.files;for(var i = 0; i < fileList.length; i++) {var imgSrcI = getObjectURL(fileList[i]);imgName.push(fileList[i].name);imgSrc.push(imgSrcI);imgFile.push(fileList[i]);}
复制代码
getObjectURL方法是一个用于获取本地图片的地址,使用该url可以显示图片
function getObjectURL(file) {var url = null ;if (window.createObjectURL!=undefined) { // basicurl = window.createObjectURL(file) ;} else if (window.URL!=undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file) ;} else if (window.webkitURL!=undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file) ;}return url ;
}
复制代码
控制上传图片大小、格式以及上传数量
$('#upload').on('change',function(){ if(imgSrc.length==4){return alert("最多只能上传4张图片");}var imgSize = this.files[0].size; //bif(imgSize>1024*1024*1){//1Mreturn alert("上传图片不能超过1M");}if(this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif'){return alert("图片上传格式不正确");}})
复制代码
图片预览
创建一个addNewContent方法用于动态展示添加的图片实现图片预览,在每次上传图片的时候调用该方法
function addNewContent(obj) {$(obj).html("");for(var a = 0; a < imgSrc.length; a++) {var oldBox = $(obj).html();$(obj).html(oldBox + '<li class="content-img-list-item"><img src="'+imgSrc[a]+'" alt=""><a index="'+a+'" class="hide delete-btn"><i class="ico-delete"></i></a></li>');}
}
复制代码
图片删除
1.通过监听鼠标的mouseover事件,显示图片删除按钮
$('.content-img-list').on('mouseover','.content-img-list-item',function(){$(this).children('a').removeClass('hide');});
复制代码
2.监听鼠标的mouseleave事件,隐藏图片删除按钮
$('.content-img-list').on('mouseleave','.content-img-list-item',function(){$(this).children('a').addClass('hide');});
复制代码
3.获取图片index下标属性,通过js的splice方法删除数组元素,重新调用addNewContent方法遍历图片数组显示预览图片
$(".content-img-list").on("click",'.content-img-list-item a',function(){var index = $(this).attr("index");imgSrc.splice(index, 1);imgFile.splice(index, 1);imgName.splice(index, 1);var boxId = ".content-img-list";addNewContent(boxId);if(imgSrc.length<4){//显示上传按钮$('.content-img .file').show();}});
复制代码
图片上传提交
这里主要使用FormData来拼装好数据参数,提交到后台
var formFile = new FormData();
复制代码
遍历imgFile图片流数组拼装到FormData中
$.each(imgFile, function(i, file){formFile.append('myFile[]', file);});
复制代码
添加其他参数
formFile.append("type", type); formFile.append("content", content); formFile.append("mobile", mobile);
复制代码
最后使用ajax提交内容
$.ajax({url: 'http://zhangykwww.yind123.com/webapi/feedback',type: 'POST',data: formFile,async: true, cache: false, contentType: false, processData: false, // traditional:true,dataType:'json',success: function(res) {console.log(res);}})
复制代码
以上就实现了图片上传、图片预览和图片删除的功能
实现过程中遇到的坑
1.解决input file上传图片无法上传相同的图片 如果是相同图片onChange事件只会触发一次 onChange里面清除元素的value
document.querySelector('#uploader-get-file').value = null
复制代码
也可以这样this.value = null;
$('#upload').on('change',function(){//图片上传this.value = null;//解决无法上传相同图片的问题
})
复制代码
2.使用formData上传file数组 3种方式(参考https://segmentfault.com/q/1010000009622562)
方式1:
$.each(getImgFiles(), function(i, file){formData.append('files', file);
});
方式2:
$.each(getImgFiles(), function(i, file){formData.append('files[]', file);
});
方式3:
$.each(getImgFiles(), function(i, file){formData.append('files_' + i, file);
});
复制代码
3.jquery设置 ajax属性
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false,// 告诉jQuery不要去设置Content-Type请求头
复制代码
戳我在线查看demo
完整的代码我已经上传到了github.com/fozero/fron…,可以点击查看,如果觉得还不错的话,记得star一下哦!
作者:fozero 声明:原创文章,转载请注明出处,谢谢!www.cnblogs.com/fozero/p/88…
标签:input,file,图片上传
图片上传,预览以及图片删除相关推荐
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- 简单快捷的实现图片上传预览效果
简单快捷的实现图片上传预览效果 如何简单快捷的实现图片上传预览效果,想必这是绝大多数的c#新手遇到的一个小难题. 我学习c#也有一年的时间了,就把一个简单的方法给大家看看. 如下: readAsDat ...
- JAVA微信公众号开发第8篇JSSDK图片上传预览
简介 博主微信JSSDK&图片上传预览基于微信分享做拓展,所以一些配置操作请点击查阅JAVA微信公众号开发第7篇JSSDK&微信分享博文 页面 <html><head ...
- Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
最新文章
- 仅需一部摄像机即可实现基于AI的3D重建
- wpf指定的元素已经是另一个元素的逻辑子元素。请先将其断开连接。_在60分钟内建立一个无代码应用程序...
- Java 并发编程笔记(一)
- 力软 框架 转 mysql_快速web开发框架——learun framework
- Spring Doc 生成OPEN API 3文档
- 2018.10.26 NOIP模拟 瓶子 (dp/贪心)
- 内存如何分配和如何释放?
- 在jsp页面利用Ajax动态显示数据库中数据
- 如何使能linux vivid
- 无心剑中译奥修《顺其自然》
- 微博android签名工具,微博签名
- Raster Map光栅图 VS Vector Map矢量图
- 完美解决api-ms-win-crt-runtime-l1-1-0.dll详细步骤
- 微信,支付宝支付,微信公众号小程序授权等
- oracle04052,案例学习Oracle错误:ORA-04052
- 计算机视觉 图像处理_通过图像处理找到计算机视觉通道
- js监听移动端返回键,从内页返回首页
- 解决Linux遇到There are no enabled repos.的问题
- 神经网络中的激活函数介绍
- 错误1053 服务没有及时响应启动或控制请求
热门文章
- 悦诗风吟网络营销的目标_昔日在华年销40亿的悦诗风吟 如今卖不动了?
- lg g pro 2android,机身不止有白灰黑 红色LG G Pro 2曝光
- (Pycharm新版专业版)初次部署无法同步文件,报错信息:找不到要处理的文件或文件夹
- ES中如何查询Top10数据
- Flutter 实战之南瓜屋故事App诞生记
- 【推荐】2021云栖大会精品PDF(140+份)
- matlab曲线拟合sse等含义,Matlab曲线拟合SSE等含义
- 图文一步步详细描述刷机Mobile 6.5 的过程(内涵6700、6750、6800、6900刷机工具及驱动)...
- 福特将发布三款越野车
- vue 定义全局方法,三种方法