Firefox ベースの Ajax 画像アップロード

この記事では、Firefox に基づいた ajax 画像アップロードの実装を主に紹介します。今日は、この問題に対する完璧な解決策を紹介します。

画像ファイルをアップロードするためのプロトコルは数多くありますが、今回は主に「Content-Type: multipart/form-data;」の形式について説明します。

仕事では、フロントエンドのいくつかの静的ファイルはFTLテンプレートシステムを通じて参照され、フロントエンドページはプロジェクト開発中に大量の静的SHTMLファイルを生成する必要があると当初考えていました。バックエンドの事だけど、入社してからは、この手っ取り早い事がフロントエンドに引き継がれてる〜〜 絶句して、習慣に従うしかなかったけど、私は怠け者なので、考えただけですajaxで送信できるかどうか

いつものMDNの読み方を踏まえて、今日は主にFormDataオブジェクトが複数のファイルをアップロードするためのプロトコルを解決します。

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData

すべてが完璧であるように見えますが、File メソッドでは Chrome レベルでのみ機能します。画像をアップロードする方法はありません。通常のファイルは Blob オブジェクトを介して実装できます。 1. 長い間探した結果、URL を File オブジェクトに変換する方法が失敗しました。 。 。

2.HTML5 ファイルの方向

a. HTML5 ファイルの例から始めます

https://developer.mozilla.org/en-US/docs/DOM/FileReader

この例では、oFREvent.target を出力します。結果は「data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...」が見つかりました

Base64でエンコードされたデータであることが判明しました

上記のエンコードデータを見て、Blobオブジェクトがサポートしているかどうか考えましたコードは以下の通りです

var fd = new FormData();
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));
fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

b.. Base64でエンコードされていると思いましたが、

ネットでbase64エンコードとデコードの例を見つけて試してみました

fd.append('my-file', new Blob([new Base64().decode('/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...')],{type:"image/jpeg"}));

パケットを確認して、ファイルと ajax データが正常に転送されたことが判明した場合、それは失敗したはずです

3. ブラウザのページレベルでのセキュリティのため、ファイルを選択する操作が必要なようです。手動で行われます

https://developer.mozilla.org/en-US/docs/DOM /XMLHttpRequest/FormData/Using_FormData_Objects

fd.append('my-file',document.querySelector(Selector).files[0])

実際、最初はファイル API に誤解されていました。ページレベル

突然、このメソッドが最後のアドレスの先頭で使用されていることに気づきました。 。まだ物事を真剣に考えずに、回り道をしてしまったみたいです。

追記、Oil Monkeyプラグインのような機能を追加し、ChromeレベルのFileメソッドをサポートすることで、簡単に写真をアップロードできるようになりました。

上記は私があなたのためにまとめたものです。

関連記事:

AJAX送信フォームのデータインスタンス解析

ajaxクロスドメイン(基本ドメイン名が同じ)フォーム送信方法

以上がFirefox ベースの Ajax 画像アップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。