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

如何用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"><a href="http://s.jf3q.com">click</a>
			<form method="post" encType="multipart/form-data"></form>

<!-- 图片处理 -->
    <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'});
}