画像アップロードの完全ガイド_html/css_WEB-ITnose

写真アップロードの完全なソリューション

サブトピックの説明:

• 従来のフォームアップロード
• Ajax (クロスドメイン) アップロードをシミュレートするために iframe を非表示にする
• Ajax アップロードを実装するための HTML5 機能
• 画像情報を確認する

従来のフォームアップロード

従来の写真のアップロードは、ずっと前に遡る必要があります。 Python を使用して単純な WSGI Web ページを実装するとします。その後、フォームを使用して POST リクエストをサーバーに送信し、現在のページを更新する必要があります。実際、初期の HTTP は画像のアップロードをサポートしていませんでした。通常の HTTP POST リクエストでは、ヘッダー情報で Content-Length を使用してコンテンツの長さを示していました。ヘッダー情報は1行に1つで、空行の後に「実体」となるボディが続きます。その Content-Type は application/x-www-form-urlencoded です。これは、GET リクエスト中の URL 内の queryString と同様に、メッセージ コンテンツが URL エンコードされることを意味します。

id=1&setting=will

「RFC 1867 - Form-b​​ased File Upload in HTML」が提案された後、HTTP は画像のアップロードをサポートし始めました。

うわー

enctype 属性を multipart/form-data に変更するだけです。

Ajax (クロスドメイン) アップロードをシミュレートするために iframe を非表示にする

最初のステップを実装したとき、これは最適な選択ではありませんでした。なぜですか?画像をサーバーに送信する操作を完全に完了するには、ページを更新する必要があるためです。最初は、多くの人が更新せずに Ajax アップロード画像を実装しようとします。そこで問題は、それをどのように実現するかです。

この時点で、iframe を使用して必要事項を完了できます。フォームの名前は iframe のターゲットに対応し、更新ターゲットを iframe に転送することができます。ただし、最初に iframe を設定する必要があることに注意してください。隠すために。

<form action="http://api.com/upload" method="POST" enctype="multipart/form-data">    <input type="file" name="img"></form>

HTML5 機能により Ajax アップロードが実装されました

新しい HTML5 機能により、バイナリ データを送信できるアップロードが簡単になりました。通常の状況では、フォーム オブジェクトを FormData にロードするだけで済みます。

AjaxForm.prototype._addEvent = function(){    var self = this;    this._iframe.on('load',function(){        if (self._iframeLoadState) {            var cw = this.contentWindow;            var loc = cw.location;            if (loc.href === 'about:blank') {                if (_.isFunction(self._failure)) {                    self._failure.call(this);                };            }else{                if (_.isFunction(self._success)) {                    try {//如果后台没有作跨域处理，则需手动触发onComplete                        var body = this._iframe[0].contentWindow.document.body;                        innerText = body.innerText;                        if (!innerText) {                            innerText = body.innerHTML;                        };                        if (innerText) {                            self._success.call(this, $.parseJSON(innerText));                        };                    } catch (e) {                        self._success.call(this);                    }                };            };            self._iframeLoadState = false;        };    });};

ただし、興味深いのは、append メソッドを使用してさらに情報を追加できることです。

var form = document.getElementById('form');var formData = new FormData(form);

最後に、最終送信には XMLHttpRequest を使用します

var img = document.getElementById('img').files[0];var formData = new FormData();formData.append('img',img);

興味深いことに、XHR2 は、アップロードの進行状況を取得するための次のような素晴らしいイベントを提供します。例:

accept: 選択できるファイルの MIME タイプを示します。複数の MIME タイプは英語のカンマで区切られています。一般的に使用される MIME タイプを次の表に示します。

multiple: 複数のファイルを選択できるかどうか。複数のファイルがある場合、値は最初のファイルの仮想パスになります。

対照的に、より便利なのは、ファイル オブジェクトを取得することです。 例:

• var xhr = new XMLHttpRequest();xhr.open('POST','http://api.com/upload');xhr.onreadystatechange = function(){};xhr.send(formData);

  xhr.upload.onprogress = function(evt){    console.log(evt)    var loaded = evt.loaded;//已经上传大小情况    var tot = evt.total;  //附件总大小    var per = Math.floor(100*loaded/tot);  //已经上传的百分比  }

この配列は、複数の写真をアップロードする機能に関連付けることができます。画像情報に関しては。

le ファイルオブジェクト情報:

Type 画像タイプ

LastModify 最終アップロード時刻

WeChat パブリック アカウントは 2016 年に開設されました。フロントエンドだけでなくフロントエンドも。テクノロジーについて話し、人生を共有しましょう。最先端かつ実用的なアプリケーションに注目してください。フロントエンドは変化の分野です。一緒に探求し、学び、楽しいことを一緒にやりましょう。

WeChat公式アカウントをフォローしてQRコードをスキャンしてください

🎜