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. Github for Windows使用介绍

    Git已经变得非常流行,连Codeplex现在也已经主推Git.Github上更是充斥着各种高质量的开源项目,比如ruby on rails,cocos2d等等.对于习惯Windows图形界面的程序员 ...

  2. 基础SQL语句

    SQL语句: 1.插入 方法一: "INSERT INTO [DB].[dbo].[T_Table] ([ID],[Name],[Amount],[Creater],[CreatedOn], ...

  3. Unity 下载

    Unity历史版本 http://wiki.ceeger.com/unity:history#unity_522f1 UNITY 下载存档 http://unity3d.com/cn/get-unit ...

  4. C#使用百度API通过IP获取地理位置和坐标

    百度接口相关说明:http://developer.baidu.com/map/ip-location-api.htm 返回是json格式,首先构建相关反系列化类: #region AddressFo ...

  5. osharp3使用经验:整合DbContextScope 文章 1

    osharp3的事务处理是跳过savechangeing方法来控制的,没有DbContextScope专业 DbContextScope管理dbcontext的优劣本文不讨论 整合过程: 1.在.Da ...

  6. Lua 之数据结构

    Lua 之数据结构 数组 通过整数下标访问的table中的元素,即是数组,下标默认从1开始. 一个创建二维数组的例子: mt = {} , do mt[i] = {} , do mt[i][j] = ...

  7. 在CentOS上安装ZooKeeper集群

    一共准备3个CentOS虚拟机 172.16.9.194 172.16.9.195 172.16.9.196 上传zookeeper-3.3.6.tar.gz到服务器并解压,3台服务器的目录结构如下 ...

  8. android控件库(2)-仿Google Camera 的对焦效果

    一直很喜欢Google Camera的自动对焦效果,今日闲来无事,自己做了个: 废话不多说,代码才是王道: package com.example.test.view; import com.exam ...

  9. c#之Redis队列在邮件提醒中的应用

    场景 有这样一个场景,一个邮件提醒的windows服务,获取所有开启邮件提醒的用户,循环获取这些用户的邮件,发送一条服务号消息.但问题来了,用户比较少的情况下,轮询一遍时间还能忍受,如果用户多了,那用 ...

  10. .ssh/config简单使用

    转自:http://blog.lizhigang.net/archives/265 .ssh/config简单使用 需求:  工作的电脑经常会存储不同的key,并且使用不同的用户登录linux系统.如 ...