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

WBOY
リリース: 2016-06-23 13:25:27
オリジナル
1195 人が閲覧しました

<!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 上の Android 4.4 携帯電話にアップロードすると問題が発生しますが、PC 側では問題ありません。私のコンピュータwin、携帯電話、PCには問題はありません。
xhr.send(JSON.stringify(data)); //base64を送信
投稿データがまったくありません。


ディスカッションへの返信(解決策)

正常にアップロードできるクライアントが存在する限り、コードには大きな問題がないことを意味します。一部は単なる互換性の問題です
すでに jQuery を使用しているのであれば、jQuery が提供する ajax を使用してみてはいかがでしょうか?少なくとも彼はあなたのために互換性の作業をしてくれました

モデレータに同意します

Android WeChatブラウザでテストすると、これが例外ではないことがわかります

として。 1 種類の顧客が存在する限り、クライアントが正常にアップロードできた場合、コードに大きな問題がないことを意味します。一部は単なる互換性の問題です
すでに jQuery を使用しているのであれば、jQuery が提供する ajax を使用してみてはいかがでしょうか?少なくとも互換性の作業は完了しました



実際、私は以前に jq でそれを実行したことがあり、問題は同じだったので、ネイティブで実行しました。

モデレータに同意します

Android WeChat ブラウザでテストすると、これが例外ではないことがわかります。アップロードがブロックされているためです


私は、base64 経由でファイルをアップロードします。
同一ネットワークセグメント内で携帯電話からアクセスする場合はこのコードで問題ありません。携帯電話で Alibaba Cloud Ubuntu にアクセスしたところ、データが投稿されないことがわかりました。モバイルアクセスはクロスドメインになりますか?

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

このコードを Alibaba Cloud にアップロードした後、私の携帯電話は問題なく独自の 4G トラフィックを使用でき、自宅の Wi-Fi には問題ありませんが、職場の Wi-Fi に問題があります。 。
Xiaomi 4、Samsung S6、その他の携帯電話もテストしましたが、職場の WiFi には問題ありませんでした。
Huawei p6にはサイズ制限があると言われています。そして、私がテストした上記の携帯電話にはサイズ制限がありませんでした。

神のようなアンドロイド?

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