思路：在前端把图片压缩，然后转换成为Base64的编码，再把Base64的编码使用AJAX来POST到服务器，然后在PHP解开Base64，写入到一个文件去。
<!DOCTYPE HTML>
<html lang="zh-CN">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<head>
<meta charset="UTF-8">
<title>LocalResizeIMG</title>
</head>
<style>
body {
margin: 20px 20%;
color:#777;
text-align: center;
}
</style>
<body>
<h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1>
<hr/>
<input type="file" />
<hr/>
<!-- javascript
================================================== -->
<script src="/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type="text/javascript"></script>
<!-- mobileBUGFix.js 兼容修复移动设备 -->
<script src="/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type="text/javascript"></script>
<script type="text/javascript">
$('input:file').localResizeIMG({
width: 500,
quality: 0.8,
success: function (result) {
var img = new Image();
img.src = result.base64;
$('body').append(img);
//console.log(result);
$.ajax({
url: './uploads.php',
type: 'POST',
data:{formFile:result.clearBase64},
dataType: 'HTML',
timeout: 1000,
error: function(){
alert('Error loading PHP document');
},
success: function(result){
//console.log(result);
alert("Uploads success~")
}
});
}
});
</script>
</body>
</html>
<?php
$base64 = $_POST['formFile'];
$IMG = base64_decode($base64);
$path = './';
file_put_contents($path.time().'.jpg',$IMG);
?>
插件地址：
https://github.com/think2011/localResizeIMG3/
demo下载：
分享到：
相关推荐
"HTML5+Canvas手机拍摄，本地压缩上传图片"是指利用HTML5的特性，在移动设备上实现照片拍摄，然后通过Canvas进行图片处理，包括压缩，最后将处理后的图片上传到服务器。这个过程涉及到多个技术点： 1. ** ...
总结来说，HTML5+jQuery+Canvas的组合使得在网页上调用手机拍照功能并上传图片成为可能，同时还能进行图片的本地处理和压缩，大大提升了用户体验和效率。通过学习和掌握这些技术，开发者可以创建更加动态、交互性强...
总结来说，通过HTML5的`<input type="file">`、File API、jQuery、Canvas以及Ajax，我们可以实现一个简单的手机拍照上传功能，同时提供预览图和原图的上传。这个功能在现代Web应用中非常常见，可以为用户提供流畅的...
上一篇只讲到前台操作，这篇专门涉及...HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（上） ok，废话不多说了，直接贴代码吧。 1、前台js代码： $.ajax({ async:false,//是否异步 cache:false,//是否使用缓存
这个"js+html5拍照压缩图片上传.rar"的压缩包就是一个典型的例子，它集成了Base64编码、JS插件、HTML5的图片处理功能以及JS拍照上传的解决方案。下面我们将详细探讨这些知识点。 首先，`Base64`是一种用于在网络上...
HTML5+Canvas调用手机拍照功能实现图片上传是一种在现代网页应用中常见且实用的技术，尤其在移动设备上。此技术结合HTML5的文件API、Canvas元素和jQuery库，允许用户通过内置摄像头直接拍照并上传图片，从而提供更加...
标题 "手机H5上传压缩相片拍照+php接受" 描述了一个常见的移动应用开发场景，涉及到HTML5技术、图片压缩以及PHP服务器端处理。在这个场景中，用户通过手机的H5页面拍摄或选择照片，然后将经过压缩的图片上传到服务器...
标题 "完整拍照图片上传H5+PHP" 涉及的是一个使用HTML5和PHP技术实现的图片上传功能，特别适用于手机拍照后即时上传的场景。这个功能在现代移动应用和网页中非常常见，比如社交媒体、在线购物平台和个人博客等。 ...
总结来说，这个移动端html5+jQuery图片裁剪插件头像利用了HTML5的File API、Canvas、getUserMedia接口以及jQuery库，实现了选择图片、裁剪、压缩、预览等功能，且具有良好的兼容性和适应性。开发者可以通过学习和...
在前端开发中，图片处理是一项常见任务，尤其是在用户上传图片时需要进行尺寸和质量的控制以减少服务器存储空间和提高页面加载速度。"layer+压缩图片js" 是一个结合了Layer弹框插件和图片压缩功能的JavaScript解决...
3：加入了压缩数码相机图片， 以及HTML5 canvas本地切图,截图 但依然继续支持IE6 7 8 哦！有人问IE6 7 8不兼容HTML5啊，你骗人吗？ 先不要急！shearphoto 2.0的机制是这样的：有HTML5则使用HTML5 canvas切图，截图...
3：加入了压缩数码相机图片， 以及HTML5 canvas本地切图,截图 但依然继续支持IE6 7 8 哦！有人问IE6 7 8不兼容HTML5啊，你骗人吗？ 先不要急！shearphoto 2.0的机制是这样的：有HTML5则使用HTML5 canvas切图，截图...
shearphoto2.0 是HTML5头像截图插件，拍照截图，JS截图，美工切图插件，能直接压缩数码相机图片进行截图！是互联网上写得最好的一个同类型插件 ShearPhoto 完美支持Linux Windows 服务器，国外空间等完美通过。 兼容...
HTML5在实现微信拍摄上传照片功能时，主要利用了几个关键特性：`<input type="file">`元素、File API、Canvas以及Base64编码。下面将详细解释这些知识点。 1. **`<input type="file">`元素**：这是HTML5引入的一个...
这通常涉及到从手机相册选择图片或者直接通过相机拍摄。在这个过程中，HTML5和jQuery的结合提供了强大的功能，使得开发者可以创建用户友好的图像处理接口。本文将详细介绍如何使用这些技术实现移动端的头像裁剪与...
3. **图片上传**：在前端实现图片上传，通常会用到HTML5的File API，允许用户通过浏览器选择本地文件，并在不离开页面的情况下处理这些文件。此外，可能还使用了FormData对象将图片数据发送到服务器。 4. **HTML**...