localResizeIMG先压缩后使用ajax无刷新上传(移动端)

前端之家收集整理的这篇文章主要介绍了localResizeIMG先压缩后使用ajax无刷新上传(移动端)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面通过文字说明和代码分析的方式给大家分享移动端图片上传之localResizeIMG先压缩后ajax无刷新上传,具体实现过程请看下文。

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片上传,这样不现实。所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器。

一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了。

处理过程

LocalResizeIMG压缩图片 AjaxPost图片base64到后台 后台接收base64并保存,返回状态 前台代码

重点,引用LocalResizeIMG.js(插件主体)及mobileBUGFix.mini.js(移动端的补丁)

<div class="jb51code">
<pre class="brush:js;">
<!DOCTYPE HTML>

<Meta charset="UTF-8"> 移动端<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a><a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a><a href="https://www.jb51.cc/tag/jiejuefang/" target="_blank" class="keywords">解决方</a>案localResizeIMG先压缩后ajax无刷新<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>