当前位置: 代码迷 >> PHP >> 手机压缩图片透过base64 上传 ajax不能post
  详细解决方案

手机压缩图片透过base64 上传 ajax不能post

热度:705   发布时间:2016-04-28 16:57:13.0
手机压缩图片通过base64 上传 ajax不能post


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试上传文件</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/mobileFix.mini.js"></script>
    <script type="text/javascript" src="../js/exif.js"></script>
    <script type="text/javascript" src="../js/lrz.js"></script>
</head>
<style>    body {
    margin: 20px 20%;
    color: #777;
    text-align: center;
}</style>
<body>
<hr/>
<input type="file" accept="image/*"/>
<hr/>
<script type="text/javascript">
    var input = document.querySelector('input');
    input.onchange = function () {
        lrz(this.files[0],
                {width: 800, height: 600,quality:0.5,
                    before: function(){},
                    fail: function(){},
                    done: function (results) {
                        // 你需要的数据都在这里,可以以字符串的形式传送base64给服务端转存为图片。
                        var img = new Image();
                        $('body').append(img);
                        // 发送到后端
                        var xhr = new XMLHttpRequest();
                        var data = {
                            base64: results.base64,
                            size: results.base64.length // 校验用,防止未完整接收
                        };
                        xhr.open('POST', '1.php');
                        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                var result = JSON.parse(xhr.response);
                                result.error
                                        ? alert('服务端错误,未能保存图片')
                                    //: demo_report('服务端实存的图片', result.src, result.size);
                                        : img.src = result.src;
                            }
                        };
                        xhr.send(JSON.stringify(data)); // 发送base64

                    },
                    always: function(){

                    }
                }
        )};

</script>
</body>

</html>




<?php
$base64=file_get_contents("php://input"); //获取输入流
$base64=json_decode($base64,1);
$data = $base64['base64'];
preg_match("/data:image\/(.*);base64,/",$data,$res);
$ext = $res[1];
if(!in_array($ext,array("jpg","jpeg","png","gif"))){
echo json_encode(array("error"=>1));die;
}
$file=time().'.'.$ext;
$data = preg_replace("/data:image\/(.*);base64,/","",$data);
if (file_put_contents('../uploadFiles/'.$file,base64_decode($data))===false) {
echo json_encode(array("error"=>1));
}else{
echo json_encode(array("error"=>0,'src'=>'../uploadFiles/'.$file));

}



这段代码上传到ubuntu上安卓4.4手机访问有问题,pc端没有问题。自己电脑win,手机、pc都没有问题。
xhr.send(JSON.stringify(data)); // 发送base64
根本没有post数据。
------解决思路----------------------
只要有一种客户端能够上传成功,就表示代码没有大问题。有的只是兼容性问题
既然已经使用了 jQuery,那为何不使用它提供的 ajax?至少兼容性工作他已替你做好了
------解决思路----------------------
同意版主 

你在安卓微信浏览器上测试的时候就会发现这个不是个例 有些是因为封了上传


------解决思路----------------------
直接使用jquery吧,这样可以更好解决兼容问题。
  相关解决方案