最近客户要求实现论坛贴子附件裁剪功能，没有考虑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对象上传的更多相关文章

  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. PHP上传文件大小限制问题 post_max_size对大小的影响及解决方法

    今天在操作php上传的时候发现了一个问题,就是当php脚步上传的文件大小超过php.ini中post_max_size的限制的时候页面不会给出提醒,文件也上传失败,这个问题感觉应该算是一个另类,今天跟 ...

  2. 003.XE3包含了TPerlRegEx的单元

    使用'|'替换所有的内容 代码: program Project1; {$APPTYPE CONSOLE} uses System.SysUtils, System.RegularExpression ...

  3. Delphi 文字跑马灯

    //跑马灯 procedure Tfr_Main.tme_TitleTimer(Sender: TObject); var strTrim: Widestring; begin strTrim := ...

  4. nls_sort和nlssort 排序功能介绍

    nls_sort和nlssort 排序功能介绍 博客分类: oracle   ALTER SESSION SET NLS_SORT=''; 排序影响整个会话 Oracle9i之前,中文是按照二进制编码 ...

  5. linux sed 批量替换多个文件中的字符

    格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` linux sed 批量替换多个文件中的字符串 sed -i "s/oldst ...

  6. mysql数据库乱码

    问题:mysql数据库的编码都设置为utf8的情况下,用jdbc往数据库中插入数据时仍然乱码, 解决方法:在jdbc的中加上参数characterEncoding=utf8&useUnicod ...

  7. Centos 6.4上面用Shell脚本一键安装vsftpd

    Centos 6.4上面用Shell脚本一键安装vsftpd install.sh #!/bin/bash if [ `uname -m` == "x86_64" ];then m ...

  8. 备忘·添加SublimeText3右键菜单

    因为用的sublimeText3是免安装版,打开未关联文件,略有麻烦,所以搜了一下,发现几种解决办法,其中INF文件的方法很喜欢,备份下 [Version] Signature="$Wind ...

  9. Decision Boundaries for Deep Learning and other Machine Learning classifiers

    Decision Boundaries for Deep Learning and other Machine Learning classifiers H2O, one of the leading ...

  10. Chapter 17. Objects and Inheritance（对象与继承）

    javascript面向对象编程有几个层面: 1: 单一对象 (covered in Layer 1: Single Objects) 2: 对象之间的 prototype  (described i ...