利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
最近客户要求实现论坛贴子附件裁剪功能，没有考虑js与ios、android容器交互解决方案，单纯用js去实现它的。由于本来附件上传用的别的插件实现的，所以是在此基础上费了不少劲，才把jQuery-photoClip裁剪功能垒上去，但好再最后成功实现了。在实现过程中遇到了几个问题，记下来和大家一起学习研究。
由于安全原因，是不允许js操作文件的。所以jQuery-photoClip裁剪下来的是base64字符串，把此字符串上传后台解码为文件，就可以了。但是如果字符串过大，用post或geth上传就会超过浏览器传输最大量，后台就会接收失败，那看来用普通字符串上传行不通。接着又继续研究，不断查找资料，问题终于解决，js把base64字符串解码转成Blob对象再进行上传，效果和文件上传一样，php在用台用$_FILES接收就可以了。
http://www.htmleaf.com/jQuery/Image-Effects/201510292721.html 这里有jQuery-photoClip介绍与下载
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<title>支持移动设备触摸手势的jQuery图片裁剪插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<style>
#clipArea {
margin: 20px;
height: 300px;
}
#file,
#clipBtn {
margin: 20px;
}
#view {
margin: 0 auto;
width: 200px;
height: 200px;
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body ontouchstart="">
<article class="htmleaf-container">
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
</article> <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.js"></script>
<script src="js/jquery.photoClip.js"></script>
<script>
var one_obj = {
/**
* @param base64Codes
* 图片的base64编码
*/
funUploadFile: function(base64Codes){
var self = this;
var formData = new FormData();
//convertBase64UrlToBlob函数是将base64编码转换为Blob
//append函数的第一个参数是后台获取数据的参数名,在php中用$FILES['imageName']接收，
formData.append("imageName",self.convertBase64UrlToBlob(base64Codes));
//ajax 提交form
$.ajax({
// 你后台的接收地址
url : 'your_url',
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头 success:function(data){
console.log('上传成功');
},
xhr:function(){ //在jquery函数中直接使用ajax的XMLHttpRequest对象
var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log("正在提交."+percentComplete.toString() + '%'); //在控制台打印上传进度
}
}, false); return xhr;
} });
}, /**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
convertBase64UrlToBlob: function(urlData){
//去掉url的头，并转换为byte
var bytes=window.atob(urlData.split(',')[1]); //处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
// 此处type注意与photoClip初始化中的outputType类型保持一致
return new Blob( [ab] , {type : 'image/jpeg'});
}, init: function() {
var self = this;
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#file",
view: "#view",
ok: "#clipBtn",
outputType: 'jpg',
loadStart: function() {
console.log("照片读取中");
},
loadComplete: function() {
console.log("照片读取完成");
},
clipFinish: function(dataURL) {
console.log('裁剪完成');
self.funUploadFile(dataURL);
}
});
}
}; one_obj.init(); </script>
</body>
</html>
利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传的更多相关文章
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- [插件] 如何在一个页面中使用多个SWFUpload对象上传文件
首先需要引入相应的样式和JS文件,还需要借助jQuery的js 提供下载路径:http://pan.baidu.com/s/1EUzca ① 引入js <script type="te ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域
奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图 上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...
- IT轮子系列（四）——使用Jquery+formdata对象 上传 文件
前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...
- 通过jQuery Ajax使用FormData对象上传文件 （转载）
XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...
- [转] 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
- 使用jQuery.FileUpload插件和Backload组件裁剪上传图片
□ 思路 1.自定义控制器继承Backload的默认控制器BackloadController2.自定义一个jQuery File Upload初始化js文件,使用自定义控制器的方法3.在视图页面调用 ...
随机推荐
- memcached 在windows下安装及启动
memcached 在windows下安装及启动 Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数, ...
- 写 一个PHP脚本遇到的问题总结
在项目中,因为之前的人员,基础数据没有处理好,后面需要写一个脚本来处理这个问题,经验少,总结如下: 1.在linux下直接连接跑处理MySQL数据的脚本,要用PDO的方式连接数据库,长时间在框架中处理 ...
- php eval函数用法总结
可以在php.ini禁止此函数,结果失败了 eval定义和用法 eval() 函数把字符串按照 PHP 代码来计算. 该字符串必须是合法的 PHP 代码,且必须以分号结尾. 如果没有在代码字符串 ...
- php用户验证代码的简单例子
发布:sunday01 来源:net [大 中 小] 分享一个简单的php用户验证代码,适合初学的朋友参考,主要学习$_post传递数据及isset检测变量的方法. php简单用户验证代码 ...
- PHP联合sqlserver2008使用的全过程 （ 原创 亲测）
一.环境 php5.2.5 sqlserver2008 win7 二.配置PHP 1.打开php.in将extension=php_mssql.dll的注释符号去掉. 2.打开php.in将mssql ...
- UI设计的奥义
个人觉得一个好的UI应该具备如下特点 1.符合人类认知行为 2.契合人体生物学 3.平滑,流畅 4.适当的交互会让你的应用更加成功 5.动态的内容才是招蜂引蝶的资本
- homework-Agile Software Development
对敏捷开发的一些思考 这周的作业是对敏捷开发的相关阅读和思考. 在阅读的过程中,可以看到作者是一位具有丰富编程经验的大师.在开发的经历中,作者经历了极限编程等开发过程,但是在作者的多年经验中,作者还是 ...
- 设置BootStrap导航条的高度
只要加上这段css就可以覆盖Bootstrap.css的代码,定制符合自己的样式 .navbar { min-height: 40px; } .nav > li > a { padding ...
- 几种 Docker 监控工具对比
轻量级虚拟化容器 Docker,自发布以来便广受业界关注,在开源界和企业界掀起了一阵风.Docker 容器相对于 VM 有以下几个优势:启动速度快:资源利用率高:性能开销小. 从图中可以看出 Dock ...
- asp.net 弹出式日历控件 选择日期 Calendar控件
原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...