用的ajax提交的表单，js base64编码怎么用

Posted 2023-04-20

ajax提交之前
以JQuery为例
var options =
target: \'\', // target element(s) to be updated with server response
// url: url,
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
;

有个 beforeSubmit，对应showRequest方法，在这个方法里面可以进行加密
// pre-submit callback
function showRequest(formData, jqForm, options)
var queryString = $.param(formData);
//可以在此进行数据加密
return true;
参考技术A

有一个base64.js 包。

导入后调用编码函数，通过post方式传递即可。

jquery photoclip 怎么提交

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比较方便