ホームページ  >  記事  >  ウェブフロントエンド  >  js を介してアップロードされた画像情報 (パス、名前、サイズを一時的に保存) を取得し、ajax_javascript スキルを介してバックエンドに渡す方法

js を介してアップロードされた画像情報 (パス、名前、サイズを一時的に保存) を取得し、ajax_javascript スキルを介してバックエンドに渡す方法

WBOY
WBOYオリジナル
2016-05-16 15:37:391758ブラウズ

プロジェクト要件: アップロードされた画像情報 (一時的な保存パス、名前、サイズ) を 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でバックエンドに渡すためのエディター側での共通メソッドですので、皆様のお役に立てれば幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。