ホームページ >ウェブフロントエンド >jsチュートリアル >js を介してアップロードされた画像情報 (パス、名前、サイズを一時的に保存) を取得し、ajax_javascript スキルを介してバックエンドに渡す方法
プロジェクト要件: アップロードされた画像情報 (一時的な保存パス、名前、サイズ) を js 経由で取得し、それを ajax 経由でバックエンドに渡す方法
サブジェクトは jquery を使用して
を受信します<input name="c_pic" id="c_pic" type="file" class="file">
使用されるメソッドは次のとおりです:
var input = document.getElementById("c_pic"); input.addEventListener('change',readFile,false); function readFile(){ var file = this.files[0]; }
対象者は、アップロードされた画像の関連情報をバックエンドに送信するために ajax post メソッドを使用したいと考えています。受信したファイルは、post を使用して送信できるデータ形式に変換するにはどうすればよいですか?
このトピックを見たとき、それは簡単ではないと思いました。JSON.stringify(file) を介してファイルを直接渡しました (注: stringify() は、オブジェクトから文字列を解析するために使用されます)。 :
var input = document.getElementById("c_pic"); input.addEventListener('change',readFile,false); function readFile(){ var file = this.files[0]; var file_json = JSON.stringify(file); console.log(file_json); //打印出来是: {} $.post('',file_json); }
出力されたのは空のオブジェクトであることがわかりました: {}; それについて何かご存知の場合は、お知らせください。
そこで、私は気が変わり、uploadfile プラグインまたは Baidu の webuploader を使用しました。jQuery File Upload は、複数ファイルのアップロード、キャンセル、削除、アップロード前のサムネイル プレビュー、画像サイズのリスト表示、アップロードのサポート。さまざまな動的言語でのサーバー側の開発をサポートします。
html5 をサポートしている場合は、FormData Ajax を使用してアップロードできます。
上記の内容は、アップロードされた画像の情報(一時的な保存パス、名前、サイズ)をjsで取得し、ajaxでバックエンドに渡すためのエディター側での共通メソッドですので、皆様のお役に立てれば幸いです。