photoclip截图上传_jquery photoclip 怎么提交

A. photoclip引入到react项目中提示 document is not defined

如果库文件的路径是正确的，那么可能在html中加载jQuery库文件顺序有误，如果将jQuery库文件加载放到最开始位置，即可以解决该错误。

B. jquery.photoclip 怎么提交表单

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

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

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

[html] view plain
<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
<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
<input type="file" id="face_upload" name="temp_img" style="display:none">
<form method="post" encType="multipart/form-data"></form>

[html] view plain

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


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

[html] view plain
$("#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
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
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
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'});
}

C. jquery photoclip 怎么提交

photoclip截图上传

与photoclip截图上传相关的内容