js压缩上传的图片，并转化为base64字符串传输

最新推荐文章于 2024-03-23 17:56:09 发布

原创最新推荐文章于 2024-03-23 17:56:09 发布 · 942 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

34 篇文章

订阅专栏

html5

7 篇文章

订阅专栏

本文介绍了一种在微信环境中实现图片上传和实时压缩的方法。通过前端JavaScript插件LocalResizeIMG，可以将用户选择的图片进行压缩，并转换为Base64编码格式以便于传输。后端使用PHP接收并保存这些图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//前台代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信上传图片</title>
</head>
<body style="background:pink;">
<div style="text-align: center;background:url(online.png);height: 320px;width:320px;border:1px solid red;">
<input type="file" id="uploadphoto" name="file" value="上传" accept="image/*" capture="camera" style="opacity: 0;height: 320px;width:320px;border: 0;"/>
</div>

<body style="background:pink;">
<div style="text-align: center;background:url(online.png);height: 320px;width:320px;border:1px solid red;">
<input type="file" id="uploadphoto2" name="file" value="上传" accept="image/*" capture="camera" style="opacity: 0;height: 320px;width:320px;border: 0;"/>
</div>
<hr>
<img src="online.png" id="prevImg1"/>
<img src="online.png" id="prevImg2"/>
<hr>


<div style="height:50px;width:50px;background:red;" class="loading"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
<script type="text/javascript" src="LocalResizeIMG.js"></script>
<script type="text/javascript" src="mobileBUGFix.mini.js"></script>
<script>
var pic1;//名片
var pic2;//照片
//得到名片压缩并得转化为base64
$('#uploadphoto').localResizeIMG({
width: 640,
quality: 1,
success: function (result) {
pic1 = result.clearBase64;
$("#prevImg1").attr("src",result.base64);
}
});
//得到照片片压缩并得转化为base64
$('#uploadphoto2').localResizeIMG({
width: 640,
quality: 1,
success: function (result) {
data2 = result.clearBase64;
$('.loading').show();
$("#prevImg2").attr("src",result.base64);
}
});

// 点击按钮上传报名数据
$('.loading').click(function(){
var name = $("#name").val();//用户名
var xunyan = $("#xunyan").val();//宣言
var data = {name:name,xunyan:xunyan,pic1:pic1,pic2:pic2};//将报名数据传给后台
$.ajax({
type: "POST",
url: "up.php",
data: data,
dataType:"json",
success: function(data){
var data = eval("("+data+")");
alert(data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){ //上传失败
alert(1)
console.log(errorThrown);
}
});
})
</script>
</body>
</html>