后端压缩已经越来越不能满足用户的需求,尤其在前端日益发展的今天,前端压缩势在必行。以前由于一直没有找到合适的前端压缩的方法,一次放弃,一次次绕行,最终没有绕过这道坎。接下来我们说一下前端压缩还有上传
1.引入js,index.js已上传我的资源。
2.在页面中如何调用index.js,来实现前端压缩的效果。
上代码:
html:
<form method="post" action="{:U('Home/RegisterInfo/uploadzippic')}">
<input type="hidden" value="{$applicantid}" name="applicantid" />
<div class="photolist" >
<div class="itemphoteo">
<img src="__TMPL__/img/num.jpg" id="list2_1"/>
<input type="file" class="filebtn" id="file_Id1" capture="camera" accept="image/*" name="fileimg[]" οnchange="previewImage(this,'list2_1');piczip(this.id,event)"/>
<input type="text" id="1" name="fileimg3_1"/>
</div>
<div class="itemphoteo">
<img src="__TMPL__/img/num.jpg" id="list2_2"/>
<input type="file" class="filebtn" id="file_Id2" capture="camera" accept="image/*" name="fileimg[]" οnchange="previewImage(this,'list2_2');piczip(this.id,event)"/>
<input type="text" id="2" name="fileimg3_2"/>
</div>
<div class="itemphoteo">
<img src="__TMPL__/img/num.jpg" id="list2_3"/>
<input type="file" class="filebtn" id="file_Id3" capture="camera" accept="image/*" name="fileimg[]" οnchange="previewImage(this,'list2_3');piczip(this.id,event)"/>
<input type="text" id="3" name="fileimg3_3"/>
</div>
<div class="itemphoteo">
<img src="__TMPL__/img/num.jpg" id="list2_4"/>
<input type="file" class="filebtn" id="file_Id4" capture="camera" accept="image/*" name="fileimg[]" οnchange="previewImage(this,'list2_4');piczip(this.id,event)"/>
<input type="text" id="4" name="fileimg3_4"/>
</div>
<div class="itemphoteo">
<img src="__TMPL__/img/num.jpg" id="list2_5"/>
<input type="file" class="filebtn" id="file_Id5" capture="camera" accept="image/*" name="fileimg[]" οnchange="previewImage(this,'list2_5');piczip(this.id,event)"/>
<input type="text" id="5" name="fileimg3_5"/>
</div>
</div>
<input type="submit" value="提交" class="btnok"/>
</form>
js代码:
<script src="__TMPL__/js/index.js"></script>
<script type="text/javascript">
function piczip(fileId,e){
// var formData = new FormData(),
var oFile = $('#'+fileId)[0].files[0],
imgSize = oFile.size,
inputid=fileId.substr(7,1);
// document.getElementById(fileId).οnclick=function(){
// console.log(inputid);
// }
// alert(inputid);
if(imgSize < 256 * 1024){
// console.log($("#list2_"+inputid).attr("src"));
// document.getElementById(inputid).value=$("#list2_"+inputid).attr("src");
imgChange(e,inputid,fileId);
} else { // 图片压缩处理
// alert("2222");
var reader = new FileReader(),
maxWidth = 400,
maxHeight= 400,
suffix = oFile.name.substring(oFile.name.lastIndexOf('.') + 1);
if(imgSize > 2 * 1024 * 1024){
//alert("3333");
maxWidth = 800;
maxHeight= 800;
}
reader.onload = function(e) {
var base64Img= e.target.result;
// alert(base64Img);
// console.log(base64Img);
// console.log(base64Img.length);
//--执行resize。
var _ir=ImageResizer({
resizeMode:"auto",
dataSource:base64Img,
dataSourceType:"base64",
maxWidth:maxWidth, //允许的最大宽度
maxHeight:maxHeight, //允许的最大高度。
onTmpImgGenerate:function(img){
},
success:function(resizeImgBase64,canvas){
// var blob = dataURLtoBlob(resizeImgBase64);
// formData.append(fileId, blob, oFile['name']);
// alert(blob);
// uploadPic(formData, picNum);
console.log(resizeImgBase64);
console.log(resizeImgBase64.length);
// alert(inputid);
if(resizeImgBase64){ document.getElementById(inputid).value=resizeImgBase64;}
//console.log(document.getElementById(inputid).value);
}
});
// alert(base64Img);
};
reader.readAsDataURL(oFile);
//alert(imgSize);
}
}
function imgChange(e,inputid,fileId) {
console.info(e.target.files[0]);//图片文件
var dom =$('#'+fileId)[0].files[0];
console.info(dom.value);//这个是文件的路径 C:\fakepath\icon (5).png
console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
console.info(this.result); //这个就是base64的数据了
// var sss=$("#showImage");
// $("#showImage")[0].src=this.result;
document.getElementById(inputid).value=this.result;
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
}
</script>
此时,前端压缩就已经成功了。会将压缩过后的图片base64格式编码赋值在隐藏为文本域当中,提交表单的方式提交php来处理
接下来,我们在后台如何处理这些提交过来的base64格式的字符串,如何将他存储到服务器当中,然后将路径存入数据库
php 代码:
public function uploadzippic(){
$applicantid=I('applicantid');
$where['applicantid']=$applicantid;
$data['fileimg3_1'] = I('fileimg3_1');
$data['fileimg3_2'] =I('fileimg3_2');
$data['fileimg3_3'] =I('fileimg3_3');
$data['fileimg3_4'] =I('fileimg3_4');
$data['fileimg3_5'] =I('fileimg3_5');
$file_path="./Public/Imagessm/".date('Y-m-d H:i:s').uniqid()."/";
foreach($data as $k=>$v){
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $v, $result)){
//var_dump($result);
$type = $result[2];
$new_file = "./Public/Imagessm/";
if(!file_exists($new_file))
{
//var_dump(111111);
//检查是否有该文件夹,如果没有就创建,并给予最高权限
mkdir($new_file, 0700);
}
$new_file = $new_file.uniqid().".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $v)))){
//echo '新文件保存成功:', $new_file;
$new_file=substr($new_file, 1);
$cate[$k]=$new_file;
M('applicant_info')->where($where)->save($cate);
}else{
echo '新文件保存失败';die;
}
}
}
$this -> redirect('Home/RegisterInfo/agreem', array('applicantid' => $applicantid));
}
此时,就是大功告成,我们已将base64格式的字符串转成图片文件,并存入服务器当中,并且图片路径存入数据库,以便随时调取。