您的位置：首页 > Web前端 > JavaScript

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

2016-05-26 11:43 871 查看

//前台代码

<!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>

//需要用到的插件

<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>

//后台代码

<?php
$POSTT = $_POST['pic1'];
$img = base64_decode($POSTT);
$a = file_put_contents('./test3.jpg', $img);//返回的是字节数
echo ($a);

?>

附件中有完整例子

附件地址：http://pan.baidu.com/s/1c2Bed8k

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航