jquery photoclip 怎么提交

Posted 2023-04-01

jquery截取图片后，ajax异步提交该图片

如何用form异步提交已经截取的图片呢？因为后台(springMVC)用到组件上传图片，需要图片类型list。

解决思路：截取图片是base64，将base64存入form的input，type=file中，提交form即可。

[html] view plain copy
<script type="text/javascript" src="assets/wap/kuaiqin/js/jquery-1.12.2.min.js" ></script>
<script src="assets/wap/kuaiqin/js/iscroll-zoom.js"></script>
<script src="assets/wap/kuaiqin/js/hammer.js"></script>
<script src="assets/wap/kuaiqin/js/jquery.photoClip.js"></script>
<script type="text/javascript" src="assets/wap/kuaiqin/js/xx.js"></script>

[html] view plain copy
<img id="xiaotu" src="assets/wap/kuaiqin/img/share_feng.jpg" style="width:65px;height:65px;position:absolute;left:18px;top:-25px;">
[html] view plain copy
<input type="file" id="face_upload" name="temp_img" style="display:none">
<form method="post" encType="multipart/form-data"></form>

[html] view plain copy
<!-- 图片处理 -->
<div id="img_screen" style="position:absolute;top:0;width:100%;background:#000;overflow:hidden;display:none;"></div>
<div id="img_box" style="position:absolute;top:0;width:100%;display:none;margin-top:20%;">
<div id="clipArea" style="margin:20px;height: 300px;"></div>
</div>
<button id="clipBtn" style="position:absolute;top:0;right:0;border:0;color:#fff;background:#000;display:none;">确定</button>
<!-- end -->

[html] view plain copy
$("#xiaotu").click(function()//点击图片弹出文件夹
$("#face_upload").click();
);

[html] view plain copy
$("#face_upload,#smrz_upload").change(function()//选择图片之后，将图片放到截取框中截取
var objUrl=getObjectURL(this.files[0]);
if(objUrl)
$(window).scrollTop(0);
$("#img_screen").show();
$("#img_box").show();
$("#clipBtn").show();

)

[html] view plain copy
function getObjectURL(file)//获取选择图片的base64
var url=null
if(window.createObjectURL!=undefined) // basic
url=window.createObjectURL(file)
else if(window.URL!=undefined) // mozilla(firefox)
url=window.URL.createObjectURL(file)
else if(window.webkitURL!=undefined) // webkit or chrome
url=window.webkitURL.createObjectURL(file)

return url


[html] view plain copy
var base64=null;
$("#img_screen").css("height",$(window).height());
$("#clipArea").photoClip(
width: 200,
height: 200,
file: "#face_upload",
ok: "#clipBtn",
clipFinish: function(dataURL)
$('#xiaotu').attr("src", dataURL);
$('#datu').attr("src", dataURL);
base64=dataURL;

);
$("#clipBtn").click(function()
convertToFile(base64);
);

[html] view plain copy
function convertToFile(base64Codes)//将base64转化blob，并放到form中
var form=document.forms[0];
var formData = new FormData(form);
var img_name=$("#face_upload").val();
formData.append("img",convertBase64UrlToBlob(base64Codes),img_name);//img是input的name属性，与后台的对应即可
$.ajax(//提交表单，异步上传图片
url : "api/public/uploadImg",
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data)
imgurl=data.imgs[0];
subuserinfo_face(imgurl);

);

function convertBase64UrlToBlob(urlData)
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将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);

return new Blob( [ab] , type : 'image/png');
参考技术A jquery截取图片后，ajax异步提交该图片

转载：http://blog.csdn.net/qq_21119773/article/details/52132506

如何用form异步提交已经截取的图片呢？因为后台(springMVC)用到组件上传图片，需要图片类型list。

解决思路：截取图片是base64，将base64存入form的input，type=file中，提交form即可。

<script type="text/javascript" src="assets/wap/kuaiqin/js/jquery-1.12.2.min.js" ></script>
<script src="assets/wap/kuaiqin/js/iscroll-zoom.js"></script>
<script src="assets/wap/kuaiqin/js/hammer.js"></script>
<script src="assets/wap/kuaiqin/js/jquery.photoClip.js"></script>
<script type="text/javascript" src="assets/wap/kuaiqin/js/xx.js"></script>

<img id="xiaotu" src="assets/wap/kuaiqin/img/share_feng.jpg" style="width:65px;height:65px;position:absolute;left:18px;top:-25px;">

<input type="file" id="face_upload" name="temp_img" style="display:none">
<form method="post" encType="multipart/form-data"></form>

[html] view plain copy
<!-- 图片处理 -->
<div id="img_screen" style="position:absolute;top:0;width:100%;background:#000;overflow:hidden;display:none;"></div>
<div id="img_box" style="position:absolute;top:0;width:100%;display:none;margin-top:20%;">
<div id="clipArea" style="margin:20px;height: 300px;"></div>
</div>
<button id="clipBtn" style="position:absolute;top:0;right:0;border:0;color:#fff;background:#000;display:none;">确定</button>
<!-- end -->

$("#xiaotu").click(function()//点击图片弹出文件夹
$("#face_upload").click();
);

$("#face_upload,#smrz_upload").change(function()//选择图片之后，将图片放到截取框中截取
var objUrl=getObjectURL(this.files[0]);
if(objUrl)
$(window).scrollTop(0);
$("#img_screen").show();
$("#img_box").show();
$("#clipBtn").show();

)

function getObjectURL(file)//获取选择图片的base64
var url=null
if(window.createObjectURL!=undefined) // basic
url=window.createObjectURL(file)
else if(window.URL!=undefined) // mozilla(firefox)
url=window.URL.createObjectURL(file)
else if(window.webkitURL!=undefined) // webkit or chrome
url=window.webkitURL.createObjectURL(file)

return url


var base64=null;
$("#img_screen").css("height",$(window).height());
$("#clipArea").photoClip(
width: 200,
height: 200,
file: "#face_upload",
ok: "#clipBtn",
clipFinish: function(dataURL)
$('#xiaotu').attr("src", dataURL);
$('#datu').attr("src", dataURL);
base64=dataURL;

);
$("#clipBtn").click(function()
convertToFile(base64);
);

function convertToFile(base64Codes)//将base64转化blob，并放到form中
var form=document.forms[0];
var formData = new FormData(form);
var img_name=$("#face_upload").val();
formData.append("img",convertBase64UrlToBlob(base64Codes),img_name);//img是input的name属性，与后台的对应即可
$.ajax(//提交表单，异步上传图片
url : "api/public/uploadImg",
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data)
imgurl=data.imgs[0];
subuserinfo_face(imgurl);

);

function convertBase64UrlToBlob(urlData)
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将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);

return new Blob( [ab] , type : 'image/png');
本回答被提问者采纳 参考技术B 用form data传啊，h5比较方便

利用 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>