手机端如何实现压缩并上传多张图片,触屏图片压缩-阿里云开发者社区

开发者社区> fourn> 正文

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

简介: 问题描述 在做触屏项目的时候,经常会遇到多图上传的情况,比如商品评论。 手机端如何实现压缩并上传多张图片 第一次看到这个页面的心路历程应该是这样的: 我如果放四个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
其他情况就看你的喜好吧


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26794 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11631 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4508 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
fourn
这个人很懒,但他留下了什么...
60
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载