ホームページ > バックエンド開発 > PHPチュートリアル > 携帯電話で圧縮した画像はbase64経由でアップロードされるため、ajaxでは投稿できません。

携帯電話で圧縮した画像はbase64経由でアップロードされるため、ajaxでは投稿できません。

WBOY
リリース: 2016-06-13 12:25:26
オリジナル
1157 人が閲覧しました

携帯電話の圧縮画像は Base64 経由でアップロードされます。Ajax は投稿できません

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


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


このコードは Ubuntu にアップロードされており、Android 4.4 携帯電話のアクセスに問題があります。となりますが、PC側には問題ありません。私のコンピュータwin、携帯電話、PCには問題はありません。
xhr.send(JSON.stringify(data)); //投稿データをまったく含まずにbase64
を送信します。
------解決策----------------------
それができるクライアントがいる限りアップロードが成功した場合、コードに大きな問題がないことを意味します。一部は単なる互換性の問題です
すでに jQuery を使用しているのであれば、jQuery が提供する ajax を使用してみてはいかがでしょうか?少なくとも彼はあなたのために互換性作業を行ってくれました
-----解決策のアイデア----------------------
モデレータに同意します

Android WeChat ブラウザでテストすると、アップロードがブロックされていることが原因であることがわかります


。 --- ---解決策のアイデア----------------------
jquery を直接使用すると、互換性の問題をより適切に解決できます。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート