1.需求

做一个前端可压缩并且上传图片到后台的功能

2.使用组件

用到的主要是jq和LocalResizeIMG这2个库

3.使用方法

a.引入脚本文件

<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/LocalResizeIMG.js'></script>
<script type='text/javascript' src='js/patch/mobileBUGFix.mini.js'></script>

b.编写html

<div style="width:100%;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
<input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
<div class="imglist"></div>
<a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">点击上传文件</a>
</div>

c.编写css

body{font-family:"微软雅黑"}
*{margin:;padding:; }
.uploadbtn{ display:block;height:40px; line-height:40px; color:#333; text-align:center; width:100%; background:#f2f2f2; text-decoration:none; }
.imglist{min-height:200px;margin:10px;}
.imglist img{width:100%;}

d.执行上传代码

<script type="text/javascript">
$(document).ready(function(e) {
$('#uploadphoto').localResizeIMG({
//要压缩到的宽度
width: 1900,
quality: 1,
success: function (result) {
// result.clearBase64是base64的数据
var submitData={
base64_string:result.clearBase64,
}; $.ajax({
type: "POST",
url: "upload.php",
data: submitData,
dataType:"json",
success: function(data){
if (0 == data.status)
{
alert(data.content);
return false;
}
else
{
alert(data.content);
var attstr= '<img id='+'element_id'+' src="'+data.url+'">';
$(".imglist").append(attstr);
return false;
}
},
complete :function(XMLHttpRequest, textStatus){
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
}
});
});
</script>

e.后端php接收数据并处理。

后端会接收前端的base64数据,并base64解码保存在images文件夹下面

<?php

    $base64_string = $_POST['base64_string'];

    $savename = uniqid().'.jpeg';//localResizeIMG压缩后的图片都是jpeg格式

    $savepath = 'images/'.$savename; 

    $image = base64_to_img( $base64_string, $savepath );

    if($image){
echo '{"status":1,"content":"图片上传成功,请用手指轻触要做为头像的区域","url":"'.$image.'"}';
}else{
echo '{"status":0,"content":"上传失败"}';
} function base64_to_img( $base64_string, $output_file ) {
$ifp = fopen( $output_file, "wb" );
fwrite( $ifp, base64_decode( $base64_string) );
fclose( $ifp );
return( $output_file );
}
?>

4.总结

思路就是前端把图片base64编码,再传到后台进行base64解码并保存把图片返回给客户端并在服务端保存一份。(需在服务器下运行代码)

参考资料:http://www.cnblogs.com/manongxiaobing/p/4720568.html

移动端压缩并ajax上传图片解决方案的更多相关文章

  1. encodeURIComponent编码后java后台的解码 (AJAX中文解决方案)

    encodeURIComponent编码后java后台的解码 (AJAX中文解决方案) 同学的毕业设计出现JavaScript用encodeURIComponentt编码后无法再后台解码的问题. 原来 ...

  2. ajaxfileUpload ajax 上传图片使用

    前台html: <div class="b-mg15 img-text" room_id="<?= $items['id'] ?>"> ...

  3. ajax上传图片

    选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...

  4. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  5. Ajax上传图片以及上传之前先预览

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...

  6. asp.net core 通过ajax上传图片及wangEditor图片上传

    asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...

  7. vuejs使用FormData对象,ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...

  8. php form表单ajax上传图片方法

    form表单ajax上传图片方法 先引用jquery.form.js 前台代码<pre><form id="form1"> <input id=&qu ...

  9. 使用ajax上传图片,并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

随机推荐

  1. ServiceStack.Text 更快的序列化

    Json.net 是以前最经常用的序列化组件,后来又注意到ServiceStack号称最快的,所以我做了以下测试 1)Json.net using System; using System.Colle ...

  2. Nginx下配置ThinkPHP的URL Rewrite模式和pathinfo模式支持

    前面有关于lnmp环境的搭建,在此就不在赘述.下面就简述thinkPHP如何在nginx下开启url_rewrite和pathinfo模式支持 主要有两个步骤: 一.更改php.ini将;cgi.fi ...

  3. HTML学习笔记——frameset和marquee

    1>frameset 效果如百Google度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

  5. My VA Snippet

    My VA snippet Visual Assist X 是一款比较好用的编码辅助工具, 这款工具可以大大提高程序员的编码速度和开发效率.同时在它的指引下可以有效避免低级Bug. 真正实现快速编码, ...

  6. MySQL-curses/termcap缺失

    环境:通前篇 1.错误:缺少 /curses/temrcap checking for termcap functions library... configure: error: No curses ...

  7. The length of the string value exceeds the length configured in the mapping/parameter.

    在NHibernate 3.3 中存储的字符串太长,会抛异常:The length of the string value exceeds the length configured in the m ...

  8. javascript生成二维码

    参考: http://www.w3dev.cn/article/20140617/javascript-create-QR-code.aspx

  9. java 递归获取一个目录下的所有文件路径

    还是日志的问题,log4j生成的日志文件,自动保存到月份所在的文件夹中,需要获取到所有的日志文件,包括文件夹 private List<String> ergodic(File file, ...

  10. mysql中DATETIME,DATE和TIMESTAMP的区别整理

    简而言之.看格式,DATE 是 年月日YYYY-MM-DD,DATETIME 是 年月日时分秒YYYY-MM-DD HH:MM:SS,TIMESTAMP是 年月日时分秒YYYY-MM-DD HH:MM ...