problems with compression and upload of images on mobile
there is no problem in simulating the mobile phone environment on the pc browser, but not on the real machine.
related codes
<section class="g-flexview step2">
<header class="m-navbar fcx-navbar">
<a href="{:U("/Home/Usercenter/step1")}&uid={$authenticate_uid}" class="navbar-item">
<i class="back-ico"></i>
</a>
<div class="navbar-center">
<span class="navbar-title"></span>
</div>
</header>
<div class="g-scrollview">
<!-- setpbox -->
<div class="setpbox">
<ol class="ui-step ui-step-blue ui-step-4">
<li class="step-start step-done">
<div class="ui-step-line"></div>
<div class="ui-step-cont">
<span class="ui-step-cont-number">1</span>
<span class="ui-step-cont-text"></span>
</div>
</li>
<li class="step-done">
<div class="ui-step-line"></div>
<div class="ui-step-cont">
<span class="ui-step-cont-number">2</span>
<span class="ui-step-cont-text"></span>
</div>
</li>
<li class="">
<div class="ui-step-line"></div>
<div class="ui-step-cont">
<span class="ui-step-cont-number">3</span>
<span class="ui-step-cont-text"></span>
</div>
</li>
<li class="step-end">
<div class="ui-step-line"></div>
<div class="ui-step-cont">
<span class="ui-step-cont-number">4</span>
<span class="ui-step-cont-text"></span>
</div>
</li>
</ol>
</div>
<!-- /setpbox -->
<form id="autheform" action="{:U("/Home/Usercenter/step2")}" method="post" enctype="multipart/form-data">
<input type="hidden" name="authenticate_name" value="{$authenticate_name}">
<input type="hidden" name="authenticate_sfz" value="{$authenticate_sfz}">
<input type="hidden" name="authenticate_uid" value="{$authenticate_uid}">
<div class="upbox" id="fbtn">
<div class="bg" style="background-image: url("__WAPIMG__exam/regagent/u1196.png")">
<input type="file" name="fimg" class="yasuo" error-msg="" accept="image/jpeg" onchange="fimgclick(this);">
</div>
<p class="text-center">
</div>
<div class="upbox" id="rbtn">
<div class="bg" style="background-image: url("__WAPIMG__exam/regagent/u1206.png")">
<input type="file" name="rimg" class="yasuo" error-msg="" accept="image/jpeg" onchange="fimgclick(this);">
</div>
<p class="text-center">
</div>
<div class="upbox" id="pbtn">
<div class="bg" style="background-image: url("__WAPIMG__exam/regagent/u1214.png")">
<input type="file" name="pimg" class="yasuo" error-msg="" accept="image/jpeg" onchange="fimgclick(this);">
</div>
<p class="text-center">
</div>
<div class="pd20">
<button id="mysubmit" type="button" class="btn-block fcx-btn"></button>
</div>
</form>
</div>
</section>
<script src="__WAPJS__exam/jquery.2.1.4.min.js"></script>
<script src="__WAPJS__exam/ydui.js"></script>
<script src="__WAPJS__lib/layer/layer.js"></script>
<script src="__WAPJS__lib/localResizeIMG/lrz.bundle.js"></script>
// localResizeIMG
<script>
var imgdata = {
fimg: {
"datas": "",
"type": "",
"name": ""
},
rimg: {
"datas": "",
"type": "",
"name": ""
},
pimg: {
"datas": "",
"type": "",
"name": ""
}
};
// localResizeIMG
function fimgclick(obj){
var _tFile = obj.files[0],
_tName = $(obj).attr("name"),
imgarr = _tFile.name.toLowerCase().split("."),
imgtype = imgarr.pop(),
imgname = imgarr.join("");
lrz(_tFile)
.then(function(res){
imgdata[_tName]["data"] = res.base64;
imgdata[_tName]["type"] = imgtype;
imgdata[_tName]["name"] = imgname;
$(obj).parent(".bg").css("background-image","url("+res.base64+")")
}).catch(function(err){
dialog.toast(err, "none", 2000);
})
}
$("-sharpmysubmit").click(function(){
var _self = $(this)
var errmsg = "", errorobj = "", objname = "", flag = false;
formData = new FormData($("-sharpautheform")[0]);
$(".yasuo").each(function(){
objname = $(this).attr("name");
if(imgdata[objname]["name"] == ""){
errmsg = $("input[name="+objname+"]").attr("error-msg");
dialog.toast(errmsg,"none",2000);
return flag = false
}else{
formData.set(objname,imgdata[objname]["data"],imgdata[objname]["name"]+"."+imgdata[objname]["type"]);
return flag = true
}
});
if(flag){
_self.attr("disabled",true).removeClass("fcx-btn").addClass("btn-disabled")
$.ajax({
url: "{:U("step2")}",
type: "POST",
data: formData,
contentType: false,
processData: false,
beforeSend:function(){
dialog.loading.open();
},
complete:function(){
dialog.loading.close();
},
success: function (data) {
if (data.result) {
//window.location = "{:U("Usercenter/step3")}&id="+data.id;
}else{
_self.attr("disabled",false).removeClass("btn-disabled").addClass("fcx-btn");
}
return true;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
dialog.toast("", "none", 3000);
}
});
}
})
});
</script>
in addition:
formData.set(objname,imgdata[objname]["data"],imgdata[objname]["name"]+"."+imgdata[objname] ["type"]);
// .set() formData.append()
after checking the last line of code, it was found that the problem was in $(".yasuo") .each (function () {}), but I really didn"t know what to do and the real machine couldn"t test it.
