最近客户要求实现论坛贴子附件裁剪功能,没有考虑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介绍与下载

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
  7. <meta name="apple-mobile-web-app-capable" content="yes" />
  8. <meta name="format-detection" content="telephone=no, email=no" />
  9. <title>支持移动设备触摸手势的jQuery图片裁剪插件</title>
  10. <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  11. <link rel="stylesheet" type="text/css" href="css/default.css">
  12. <style>
  13. #clipArea {
  14. margin: 20px;
  15. height: 300px;
  16. }
  17. #file,
  18. #clipBtn {
  19. margin: 20px;
  20. }
  21. #view {
  22. margin: 0 auto;
  23. width: 200px;
  24. height: 200px;
  25. }
  26. </style>
  27. <!--[if IE]>
  28. <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
  29. <![endif]-->
  30. </head>
  31. <body ontouchstart="">
  32. <article class="htmleaf-container">
  33. <div id="clipArea"></div>
  34. <input type="file" id="file">
  35. <button id="clipBtn">截取</button>
  36. <div id="view"></div>
  37. </article>
  38.  
  39. <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  40. <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
  41. <script src="js/iscroll-zoom.js"></script>
  42. <script src="js/hammer.js"></script>
  43. <script src="js/jquery.photoClip.js"></script>
  44. <script>
  45. var one_obj = {
  46. /**
  47. * @param base64Codes
  48. * 图片的base64编码
  49. */
  50. funUploadFile: function(base64Codes){
  51. var self = this;
  52. var formData = new FormData();
  53. //convertBase64UrlToBlob函数是将base64编码转换为Blob
  54. //append函数的第一个参数是后台获取数据的参数名,在php中用$FILES['imageName']接收,
  55. formData.append("imageName",self.convertBase64UrlToBlob(base64Codes));
  56. //ajax 提交form
  57. $.ajax({
  58. // 你后台的接收地址
  59. url : 'your_url',
  60. type : "POST",
  61. data : formData,
  62. dataType:"json",
  63. processData : false, // 告诉jQuery不要去处理发送的数据
  64. contentType : false, // 告诉jQuery不要去设置Content-Type请求头
  65.  
  66. success:function(data){
  67. console.log('上传成功');
  68. },
  69. xhr:function(){ //在jquery函数中直接使用ajax的XMLHttpRequest对象
  70. var xhr = new XMLHttpRequest();
  71.  
  72. xhr.upload.addEventListener("progress", function(evt){
  73. if (evt.lengthComputable) {
  74. var percentComplete = Math.round(evt.loaded * 100 / evt.total);
  75. console.log("正在提交."+percentComplete.toString() + '%'); //在控制台打印上传进度
  76. }
  77. }, false);
  78.  
  79. return xhr;
  80. }
  81.  
  82. });
  83. },
  84.  
  85. /**
  86. * 将以base64的图片url数据转换为Blob
  87. * @param urlData
  88. * 用url方式表示的base64图片数据
  89. */
  90. convertBase64UrlToBlob: function(urlData){
  91. //去掉url的头,并转换为byte
  92. var bytes=window.atob(urlData.split(',')[1]);
  93.  
  94. //处理异常,将ascii码小于0的转换为大于0
  95. var ab = new ArrayBuffer(bytes.length);
  96. var ia = new Uint8Array(ab);
  97. for (var i = 0; i < bytes.length; i++) {
  98. ia[i] = bytes.charCodeAt(i);
  99. }
  100. // 此处type注意与photoClip初始化中的outputType类型保持一致
  101. return new Blob( [ab] , {type : 'image/jpeg'});
  102. },
  103.  
  104. init: function() {
  105. var self = this;
  106. $("#clipArea").photoClip({
  107. width: 200,
  108. height: 200,
  109. file: "#file",
  110. view: "#view",
  111. ok: "#clipBtn",
  112. outputType: 'jpg',
  113. loadStart: function() {
  114. console.log("照片读取中");
  115. },
  116. loadComplete: function() {
  117. console.log("照片读取完成");
  118. },
  119. clipFinish: function(dataURL) {
  120. console.log('裁剪完成');
  121. self.funUploadFile(dataURL);
  122. }
  123. });
  124. }
  125. };
  126.  
  127. one_obj.init();
  128.  
  129. </script>
  130. </body>
  131. </html>

利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传的更多相关文章

  1. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  2. [插件] 如何在一个页面中使用多个SWFUpload对象上传文件

    首先需要引入相应的样式和JS文件,还需要借助jQuery的js 提供下载路径:http://pan.baidu.com/s/1EUzca ① 引入js <script type="te ...

  3. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. js 利用iframe和location.hash跨域解决的方法,java图片上传回调JS函数跨域

    奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, functi ...

  5. IT轮子系列(四)——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

  6. 通过jQuery Ajax使用FormData对象上传文件 (转载)

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件.jQuery 2.0+ ...

  7. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  8. 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

  9. 使用jQuery.FileUpload插件和Backload组件裁剪上传图片

    □ 思路 1.自定义控制器继承Backload的默认控制器BackloadController2.自定义一个jQuery File Upload初始化js文件,使用自定义控制器的方法3.在视图页面调用 ...

随机推荐

  1. WPF 列表控件中的子控件上下文绑定

    <DataGrid Grid.ColumnSpan=" Height="Auto" SelectedItem="{Binding Path=SelectP ...

  2. rm排除指定文件或指定文件夹下文件

    3.方法3,当前文件夹中结合使用grep和xargs来处理文件名: ls | grep -v keep | xargs rm #删除keep文件之外的所有文件 说明: ls先得到当前的所有文件和文件夹 ...

  3. 关于NRW算法(Quorum算法)

    在分布式系统中,冗余数据是保证可靠性的手段,因此冗余数据的一致性维护就非常重要.一般而言,一个写操作必须要对所有的冗余数据都更新完成了,才能称为成功结束.比如一份数据在5台设备上有冗余,因为不知道读数 ...

  4. VC6.0生成的exe文件图标

    以下是我网上收到的方法 我都试过 成功不了 具体说下我遇到的问题 VC6.0生成的exe文件图标是用Icon下几个图标中value值最小的,顺序为IDR_MAINFRAME.IDR_ICONTETYP ...

  5. hdu 4358 Boring counting 离散化+dfs序+莫队算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4358 题意:以1为根节点含有N(N <= 1e5)个结点的树,每个节点有一个权值(weight ...

  6. 数位DP入门之hdu 3555 Bomb

    hdu 3555 Bomb 题意: 在1~N(1<=N<=2^63-1)范围内找出含有 ‘49’的数的个数: 与hdu 2089 不要62的区别:2089是找不不含 '4'和 '62'的区 ...

  7. RAC,客户端连接失败ORA-12514

    今天上午,某项目运维组的同事过来求助:"某系统的应用有问题了,WEB页面打开以后出现ORACLE的ORA-12514错误,貌似监听有问题了!" 该系统的数据是采用RAC部署的模式, ...

  8. Mongodb使用总结

    学习Mongodb已经有半年多了,为啥学习它,工作需要啊.好了,废话不说,总结在实际项目应用中的几点问题. 学习总结 首先,mongodb基本上既照顾到了sql某些语法,又有nosql的许多优点.入门 ...

  9. Python属性、方法和类管理系列之----元类

    元类的介绍 请看位于下面网址的一篇文章,写的相当好. http://blog.jobbole.com/21351/ 实例补充 class Meta(type): def __new__(meta, c ...

  10. 从一个脚本谈loadrunner的脚本初始化

    昨天一个同事问我,如何实现下列代码中 InputStream类is对象的实例化? * LoadRunner Java script. (Build: _build_number_) * * Scrip ...