手机端如何实现压缩并上传多张图片,触屏图片压缩

简介: 问题描述在做触屏项目的时候,经常会遇到多图上传的情况,比如商品评论。手机端如何实现压缩并上传多张图片第一次看到这个页面的心路历程应该是这样的:我如果放四个input[file]在那里,是可以简单的做的,但是非常呆,pass。

问题描述

在做触屏项目的时候,经常会遇到多图上传的情况,比如商品评论。


img_8857160f39d38d1bd12def763a381959.jpe
手机端如何实现压缩并上传多张图片

第一次看到这个页面的心路历程应该是这样的:

  • 我如果放四个input[file]在那里,是可以简单的做的,但是非常呆,pass。不过要是老板天天催进度,随时准备干完就走,那这种方式是首选!(我经常看到有些培训班在教这种模式)

  • 言归正传,我可以先异步的把图片一张一张的传到服务器存起来

  • 还有,我可以先把压缩过的图片先放在页面上,点击提交的时候再一起传过去

方案分析

我们先看异步传单张的方案,姑且叫方案A吧。我们用文字整理一下流程:

  1. 放一个隐藏的input[file]在页面上,监听“添加图片按钮”的点击事件

  2. 点击触发文件选择,选择之后把图片用AJAX传到服务

  3. 服务端接收,把图片存起来,再返回路径

  4. 使用路径生成缩略图,再把路径放到隐藏的input里面,等着和其他数据一起提交

部分代码示例如下:


img_e94b36fc9361d861284d4eb4cb479165.jpe
手机端如何实现压缩并上传多张图片

这种方案用的过程中会遇到这么几个问题:

  • 现在好一点的手机动不动就是25Md的图片大小,坏的情况下选择完图片之后会有35秒的延迟才能看到缩略图。此时是在等待服务器接受文件保存并返回路径。

  • 删除图片的时候需要和后端联动,点击缩略图右上角的叉叉需要用AJAX去删除服务器上的图片,同时还要删除HTML结构,增加了代码量。最可怕的是有些人每次传一堆图,又不提交,直接关闭了页面。那你的服务器上就会有一顿没有数据库对应的图片,有洁癖的同学一定注意。

再来看压缩之后一起传的方案,我们就叫他方案B吧。流程如下:

  1. 引入webuploader,这是一个由百度开发的插件,此处用localResizeIMG也是一样的,只是用来前端处理图片而已。

  2. 使用webuploader选择文件,生成缩略图,并不上传。此时的缩略图是一段base64的代码。

  3. 把base64同时放到IMG标签和INPUT标签里

  4. 提交整个表单的时候一起把图片保存了

部分代码示例如下:


img_d64108a10130059a076de3597ab9e791.jpe
手机端如何实现压缩并上传多张图片

img_cd4e028e7d06b1672ec7e07d65ecf7b5.jpe
手机端如何实现压缩并上传多张图片

这种方案目前看来体验很好,而且排序问题也可以直接在前端解决,由于图片进行了压缩,一次性提交的时候也不会有延迟。最大的问题也许就是在某些老旧安卓机上会让浏览器无响应,应该是把手机浏览器的内存给占满了,不过也是极端使用的情况。

总结

其实方案A也可以先用localResizeIMG将图片压缩再异步上传,效果和B方案基本相同。那么情况就变成:
如果你有服务器洁癖,请选择方案B
如果你的客户群体手机都不太好,请选择方案A
其他情况就看你的喜好吧


以上内容属于作者原创,特此声明,如需转载,请留言取得同意

目录
相关文章
|
19天前
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
34 2
|
26天前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
17 1
|
26天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
428 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
4月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
406 0
|
5月前
|
开发工具
云控微信开发SDK使用教程--手机微信朋友圈图片上传服务端
云控微信开发SDK使用教程--手机微信朋友圈图片上传服务端
|
6月前
|
XML 计算机视觉 数据格式
手机点击按钮进行切换图片
手机点击按钮进行切换图片
32 0
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
203 0
|
Android开发
android手机中图片的拖拉及浏览功能
android手机中图片的拖拉及浏览功能
101 1
|
缓存 JavaScript 前端开发
|
算法 Java Android开发
Android开发:使用Java对手机截图图片进行任意区域的颜色对比度处理操作
开发项目过程中,对于手机屏幕截图,需要对获取到的截图的任意部分进行区域颜色对比度的识别操作,由此判定任意指定区域是否满足某对比度基本标准,但是该功能在网上任何地方都没有找到过Java方面的代码,于是根据RGB转换测试的原理:即获取每个像素点的RGB,通过RGB对比度定义公式进行像素点的集合换取。