js页面压缩上传处理源代码，仅供参考

最新推荐文章于 2022-03-14 11:46:06 发布

三哥007

最新推荐文章于 2022-03-14 11:46:06 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/qq_33409338/article/details/51197834

版权

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="telephone=no" name="format-detection"/>
<meta content="email=no" name="format-detection"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<title>onecar</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="carInsuranceClaims/css/base.css"/>
<link rel="stylesheet" href="carInsuranceClaims/css/layerout.css"/>
<script type="text/javascript" src="carInsuranceClaims/js/jquery.min.js"></script>
<script type="text/javascript" src="carInsuranceClaims/js/carmar.js"></script>
<script type="text/javascript" src="carInsuranceClaims/js/jic.js"></script>
<script type="text/javascript" src="carInsuranceClaims/js/maputil.js"></script>
<script type="text/javascript" src="carInsuranceClaims/js/photo.js?v=27ce5f7"></script>
<script type="text/javascript" src="carInsuranceClaims/js/lrz.bundle.js?v=09bcc24"></script>
<style>
#upload-container img {
width: 100%;
max-width: 168px;
max-height:107px;
padding: 10px 15px;
}

.tip {
position: relative;
top: 15px;
right: 10px;
}
</style>
</head>
<script type="text/javascript">

function toInsuranceReport(){//跳转到保险报案上传照片成功页面
//错误提示信息与序号的对应关系
var errMap = new Map();
errMap.put("preview1","车头照片");
errMap.put("preview2","事故全景照片");
errMap.put("preview3","本车受损部位照片");

//照片名与序号的对应关系
var imgName = new Map();
imgName.put("preview1","img_face");
imgName.put("preview2","img_cover");
imgName.put("preview3","img_accident");
imgName.put("preview4","img_other");

var imgAarry = new Array();
//准备提交的照片
$("img.4uploadImg").each(function(index,element){
//console.info("id:"+this.id);
//console.info("src:"+this.src);
var postfix = this.id.substr(7);

var fileName = $("#f"+postfix).val();
var fileNamePostfix = fileName.substr(fileName.lastIndexOf("."));
//有相应的照片，去除提示
errMap.remove(this.id);
//去除base64之前的特殊字符，"data:image/jpeg;base64,"，解决json不能提交问题；
var base64String=this.src.substr(23);
//base64特殊字符转码后，生成json对象负值
//alert(imgName.get(this.id)+fileNamePostfix);
var imgData = {imageData:base64String,imageName:imgName.get(this.id)+fileNamePostfix};
//imgAarry.push(JSON.stringify(imgData));
imgAarry.push(imgData);
});
//console.log("---imgAarry----:"+imgAarry);
var postJson = {images:imgAarry};
//console.log("---postJson----:"+JSON.stringify(postJson));
if(!errMap.isEmpty()){
var msgStr ="请选择"+errMap.valuesStr();
alert(msgStr);
return false;
}

$.ajax({
type: "POST",
url: "havePhotoToReport.do",
contentType: "application/x-www-form-urlencoded",
async: true,
cache: false,
dataType:"json",
data:"jsonStr="+JSON.stringify(postJson),
beforeSend: function(XMLHttpRequest){
//todo
//$("#loader").removeClass("hide");
},
success: function(msg){
if(msg.errorCode !='0000'){
alert(msg.errorMsg);
return false;
}else{
alert('照片上传成功！ ');
return false;
}
},
complete :function(XMLHttpRequest, textStatus){
//todo 隐藏遮罩
//hideLoader();
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
//todo 隐藏遮罩
//hideLoader();
alert('照片上传失败！');
}
});
}

function onUploadImgChange(evt) {//上传图片

var sender =evt.target;
console.info('file id ='+evt.target.id.substring(1));
var index =evt.target.id.substring(1);
if (!sender.value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {//正则表达式校验图片文件类型
alert('图片格式无效！');
return false;
}
//var fileImg = document.getElementById('fileImg'+index);
var objPreview = document.getElementById('preview'+index);
var preview_wrapper=document.getElementById('preview_wrapper'+index);
preview_wrapper.style.display="";
var objPreviewFake = document.getElementById('preview_fake'+index);

var objPreviewSizeFake = document.getElementById('preview_size_fake'+index);

if (sender.files && sender.files[0]) {
objPreview.style.display = 'block';
console.info('objPreview.style.width:'+objPreview.width);
console.info('objPreview.style.height:'+objPreview.height);
//压缩图片处理
lrz(sender.files[0], {
width: 800
})
.then(function (rst) {
var img = new Image(),
div = document.createElement('div'),
p = document.createElement('p'),
sourceSize = toFixed2(sender.files[0].size / 1024),
resultSize = toFixed2(rst.fileLen / 1024),
scale = parseInt(100 - (resultSize / sourceSize * 100));

console.log("源图片:"+sourceSize+" KB "+"压缩后传输大小："+resultSize + ' KB (省' + scale + '%)');
/* p.style.fontSize = 13 + 'px';
p.innerHTML = '源文件：<span class="text-danger">' +
sourceSize + 'KB' +
'</span> <br />' +
'压缩后传输大小：<span class="text-success">' +
resultSize + 'KB (省' + scale + '%)' +
'</span> '; */

div.className = 'col-sm-6';
div.appendChild(img);
div.appendChild(p);

img.onload = function () {
$(objPreview).addClass("4uploadImg");
//document.querySelector('#upload-container').appendChild(div);
};

img.src = rst.base64;
objPreview.src= img.src;
return rst;
});
}
sender.style.display="none";
$("preview"+index).css("display","none");

}
</script>
<body class="body_bg">
<div class="bicycle">
<div class="bicycle_top">
<span>温馨提示：请在保证自身安全的情况下，按照图例上传照片</span>
</div>
<div class="bicycle_con">
<div class="bicycle_list" id="preview_wrapper1">
<div class="list-list" id="preview_fake1">
<img src="carInsuranceClaims/images/B_11.png" id="preview1">
<img id="preview_size_fake1" />
<div class="bicycle_pos" οnmοusemοve="f1.style.pixelLeft=event.x-60;f1.style.pixelTop=this.offsetTop;"
οnclick="f1.click()" accept="image/*">
</div>
<input type="file" id="f1" name="f1" style="float:left;
position:absolute;opacity:0;filter:alpha(opacity=0);" accept="image/*" size="1" hidefocus >
</div>
<div class="list-con">
<h3>本车车头</h3>
<i class="fr"></i>
</div>
</div>
<div class="bicycle_list" id="preview_wrapper2">
<div class="list-list" id="preview_fake2">
<img src="carInsuranceClaims/images/B_12.png" id="preview2">
<img id="preview_size_fake2" />
<div class="bicycle_pos" οnmοusemοve="f2.style.pixelLeft=event.x-60;f2.style.pixelTop=this.offsetTop;"
οnclick="f2.click()" accept="image/*">
</div>
<input type="file" id="f2" name="f" style="float:right;
position:absolute;opacity:0;filter:alpha(opacity=0);" accept="image/*" size="1" hidefocus >
</div>
<div class="list-con">
<h3>事故全景</h3>
<i class="fr"></i>
</div>
</div>
<div class="bicycle_list" id="preview_wrapper3">
<div class="list-list" id="preview_fake3">
<img src="carInsuranceClaims/images/B_13.png" id="preview3">
<div class="bicycle_pos" οnmοusemοve="f3.style.pixelLeft=event.x-60;f3.style.pixelTop=this.offsetTop;"
οnclick="f3.click()" accept="image/*">
</div>
<input type="file" id="f3" name="f3" style="float:left;
position:absolute;opacity:0;filter:alpha(opacity=0);" accept="image/*" size="1" hidefocus >
</div>
<div class="list-con">
<h3>本车受损部位</h3>
<i class="fr"></i>
</div>
</div>
<div class="bicycle_list" id="preview_wrapper4">

<div class="list-list" id="preview_fake4">
<img src="carInsuranceClaims/images/B_19.png" id="preview4">
<div class="bicycle_pos" οnmοusemοve="f4.style.pixelLeft=event.x-60;f4.style.pixelTop=this.offsetTop;"
οnclick="f4.click()" accept="image/*">
</div>
<input type="file" id="f4" name="f4" style="float:right;
position:absolute;opacity:0;filter:alpha(opacity=0);" accept="image/*" size="1" hidefocus >

</div>
<div class="list-con">
<h3>其它照片</h3>
</div>
</div>

<div class="bicycle_list bicycle_add hide">
<div class="list-list">
<img src="carInsuranceClaims/images/B_19.png">
<div class="bicycle_pos"></div>
</div>
<div class="list-con">
<h3>其它照片</h3>
</div>
</div>

</div>
<div class="btn_back btn_back1">
<img src="carInsuranceClaims/images/btn_back.png" class="fl" οnclick="history.go(-1)">
<span class="fl" οnclick="history.go(-1)">返回上一步</span>
</div>
<a οnclick="toInsuranceReport()" class="prompt_inp">上传并报案</a>
<div class="div_nu"></div>
</div>
<div id="upload-container" style="display:none" class="col-xs-12 text-center">
<input capture="camera" accept="image/*" id="photoCompress" style="" type="file"/>
</div>

<section class="layer_success hide">
<img src="carInsuranceClaims/images/B_17.png">
<h3>上传成功</h3>
</section>

<section class="layer_onecar hide">
<img src="carInsuranceClaims/images/B_22.png">
<h3>从体现车牌的角度来拍摄</h3>
<span>本方车头</span>
<a href="#" class="layer_btn">我知道了</a>
</section>

<section class="layer_onecar hide layer_threecar">
<img src="carInsuranceClaims/images/B_20.png">
<h3>从体现碰撞部位的角度来拍摄</h3>
<span>事故全景</span>
<a href="#" class="layer_btn">我知道了</a>
</section>

<section class="layer_onecar hide layer_twocar">
<img src="carInsuranceClaims/images/B_21.png">
<h3>清晰反应出车辆具体碰撞部位</h3>
<span>及碰撞程度</span>
<a href="#" class="layer_btn">我知道了</a>
</section>


<section id="loader" class="box hide">
<div class="shadow_w">
<div class="shadow">
<div class="top">
<img src="carInsuranceClaims/images/logo_icon.png" alt="">
</div>
<span>中国人寿财险</span>
<div class="foot foot_move">
<img src="carInsuranceClaims/images/jiazai.png">
</div>
</div>
</div>
</section>
<div id="bodyMask" class="hide"></div>
<script type="text/javascript" src="carInsuranceClaims/js/jquery.min.js"></script>
<script type="text/javascript" src="carInsuranceClaims/js/carmar.js"></script>
<script type="text/javascript">
document.getElementById('f1').addEventListener('change', onUploadImgChange, false);
document.getElementById('f2').addEventListener('change', onUploadImgChange, false);
document.getElementById('f3').addEventListener('change', onUploadImgChange, false);
document.getElementById('f4').addEventListener('change', onUploadImgChange, false);
document.getElementById('photoCompress').addEventListener('change', fun1,false);
</script>
</body>
</html>