ホームページ > 記事 > ウェブフロントエンド > AJAX 経由で Base64 アップロードを変換するための jQuery エンコード
AJAX 経由で Base64 アップロードを変換するための jQuery エンコード
- php中世界最好的语言オリジナル
- 2018-04-28 13:55:012193ブラウズ
今回は、AJAX 経由でアップロードするための jQuery エンコードを Base64 に変換する方法と、AJAX 経由でアップロードするための jQuery エンコードを Base64 に変換する方法について説明します。 注意事項は何ですか? ここで実際のケースを見てみましょう。
この記事の例では、jQuery がファイルを Base64 にエンコードし、AJAX 経由でアップロードする方法について説明します。参考までに皆さんと共有してください。詳細は次のとおりです: 通常、AJAX を使用してファイルを直接アップロードすることはできません。非同期ファイル アップロードの効果を実現するには、その中に新しい iframe を作成してフォーム送信プロセスを完了する必要があります。 これにより、ブラウザーの互換性が向上しますが、plupload などのファイルアップロードプラグインが使用される場合でも、コードの量は比較的多くなります。
あるレベルの柔軟性を実現するにはどうすればよいでしょうか? 通常の AJAX によるフォーム データの送信と同じように、ファイルを通常のフォーム パラメーターとして扱うことができれば素晴らしいでしょう。 ひらめきがあったのですが、javascriptのFileReaderオブジェクトを使ってファイルをbase64にエンコードしてからサーバーに送信すれば十分ではないでしょうか~
それを始めて、十分な食べ物を持って、衣類。 フロントエンドはbase64でファイルをエンコードし、ajax経由でサーバーに送信します:<head>
<meta charset="UTF-8">
</head>
<form onsubmit="return false;">
<input type="hidden" name="file_base64" id="file_base64">
<input type="file" id="fileup">
<input type="submit" value="submit" onclick="$.post('./uploader.php', $(this).parent().serialize());">
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fileup").change(function(){
var v = $(this).val();
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(e){
console.log(e.target.result);
$('#file_base64').val(e.target.result);
};
});
});
</script>バックエンドはファイルデータをデコードして保存します:
<?php
if (isset($_POST['file_base64'])){
$file_base64 = $_POST['file_base64'];
$file_base64 = preg_replace('/data:.*;base64,/i', '', $file_base64);
$file_base64 = base64_decode($file_base64);
file_put_contents('./file.save', $file_base64);
}この記事の事例を読んだ後は、この方法を習得したと思います。 . さらに興味深い情報については、他の php 中国語 Web サイトの関連記事にご注目ください。 推奨読書:
vuexでのmapStateとmapGettersの使用の詳細な説明
以上がAJAX 経由で Base64 アップロードを変換するための jQuery エンコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：vueコンポーネントを記述するための仕様次の記事：vueコンポーネントを記述するための仕様