Javascript および DHTML アップロード ファイル control_javascript スキル

まず、一括アップロード UI コントロールの例を実行してみましょう。将来的に一般的に行われる例も、UI コントロールに基づいたものになるでしょう。これらはすべて、オブジェクトまたは関数の「クラス」クラスにカプセル化されます。

前の章では、説明すべき基礎知識のいくつかを基本的に説明しましたが、今日はついにコードを書き始めました :D
まず、サンプルとして、バッチ アップロード UI コントロールを実行してみましょう。将来的に一般的に行われる例も、UI コントロールに基づいたものになるでしょう。これらはすべて、オブジェクトまたは関数の「クラス」クラスにカプセル化されます。

この例は、前の章だけを読んだ人にとっては奥が深すぎるかもしれませんが、ステップごとに説明すればすぐに理解できるはずです。重要なのは、その方法を理解することです。書き方ではありません。
まず、完成した製品のスクリーンショットのプレビューを見てください:

1. 次に、アップロードの「クラス」、

1) を定義します。このクラスの情報は次のとおりです:
1. アップロード情報がどのコンテナで構築されるかなど、いくつかの必要なパラメータをコンストラクターで渡す必要があります。
2. アップロードを追加するための add() メソッドが必要です
3. アップロードを削除するための Remove() メソッドが必要です

2) 必要な情報があります。生成されたインスタンス自体が持つ情報（アップロードオブジェクトの一部の情報）。
1. アップロード情報は合計でいくつ取得されますか?
2. このオブジェクトもコンストラクターから渡されます。

全体像は簡単に


と表現できます。 2. どの知識がよく知られていて、どの知識が知られていないのか、どのような知識を使うべきなのかを考えるべきだと思います。

1) 上のプレビューでわかるように、3 つ以上の新しいコントロールが必要です。 (追加、削除、ファイル コントロールがあるか、他にもあるかもしれません...ただし、少なくとも目に見えるものです)、新しい情報であるため、document.createElement が使用される可能性があり、追加する必要があります。 object.appendChild(obj) または obj.insertBefore() メソッドはコンテナー内で使用できます。削除はobj.parentNode.removeChild(obj)です。これはすべて前の章で述べたとおりです。

2) コントロールであるため、関数またはオブジェクトでカプセル化する必要があります。この部分の知識は第 1 章で簡単に説明しました。

3) どうすればよいですか。組織？上記のアイデアにはすでにテキストとイラストが含まれています

次に、

1)、コンストラクター、基本コード (疑似コード)

コードをコピー コードは次のとおりです:

<script> <br>function Upload(target/*container*/ > this._cnt = 0; /*Counter*/ <br> this.target = document.getElementById(target); <br>}; <br><br>upload.prototype.add = function () { <br> /* <br> *ファイルを生成します <br> *追加を生成 <br> *削除を生成 <br> *カウンター 1 <br> */ <br>} <br><br>upload.prototype.remove = function () { <br> /* <br> *ファイルを削除 <br> *追加を削除 <br> *削除を削除 <br> */ <br>}; <br><br><br><br><br>2. add メソッドの実装を記述します<br></p> <p><br>コードをコピーします<br> コードは次のとおりです:<br></p> <p class="codebody"><br><script> <br>upload.prototype.add = function () { <br> /* <br> *ファイルを生成します <br> */ <br> var self = this; = this._cnt; <br> var cFile = document.createElement("input"); <br> cFile.type="file"; <br> cFile.id = "upload_file_"; ; <br> /* <br> *追加を生成します <br> */ <br> var cAdd = document.createElement("span"); <br> cAdd.innerHTML="Add"; = function () { <br> self.add(); <br> }; <br> /* <br> *削除を生成 <br> */ <br> var cRemove = document.createElement("span") ; <br> cRemove.innerHTML="削除"; <br> cRemove.onclick = function () { <br> self.remove(cnt); }; " cnt; <br> cRemove.id = "upload_remove_" cnt; <br><br> /* 生成されたすべての情報をコンテナーに追加します */ <br> this.target.appendChild(cFile); <br> this .target .appendChild(cAdd); <br> this.target.appendChild(cRemove); <br><br> /* カウンタ 1 */ <br> this._cnt; // return <br>}; <br></script>



3. 削除メソッドの実装を記述します

コードは次のとおりです。

<script> </p>upload.prototype.remove = function (n) { <p class="codetitle"> /* <span style="text-decoration:underline;"> *ファイルを削除します </span> */ </p> var a = document.getElementById("upload_file_" n); <p class="codebody"> a.parentNode.removeChild(a); <br> /* <br> *1 つ追加 <br> */ <br> var a = document .getElementById("upload_add_" n); <br> a.parentNode.removeChild(a); <br> /* <br> *1 つ削除 <br> */ <br> var a = document.getElementById( "upload_remove_ " n); <br> a.parentNode.removeChild(a); <br><br>} <br><br><br><br><br>上記の delete メソッドは繰り返しが多すぎます。コードを短くして保守しやすくするために、remove メソッドを再度単純化することを検討できますか?ここでは、この共通関数を関数に組み込みます。つまり、関数をもう 1 つ追加します: <br><br><br><br>[Ctrl A を押してすべて選択します。 注: 外部 Js を導入する必要がある場合は、更新して実行]<br><br></p> 4. コードを結合すると、基本的には完了です :D <p><br><br><br>コードをコピーします</p> コードは次のとおりです:<p class="htmlarea"></p> <p class="codebody"><br><script> = document.getElementById(target); <br/><br/>upload.prototype.add = function () { <br/> /* <br/> *ファイルを生成する<br/> */ <br/> var self = this; var cnt = this._cnt; <br/> var cFile = document.createElement("input"); "upload"; <br/> cFile.id = "upload_file_" cnt; <br/> /* <br/> *追加を生成します <br/> */ <br/> var cAdd = document.createElement("span"); > cAdd.innerHTML="追加"; <br/> cAdd.onclick = function () { <br/> self.add() }; <br/> /* <br/> * / <br/> var cRemove = document.createElement("span"); <br/> cRemove.innerHTML="削除" <br/> cRemove.onclick = function () { <br/> self.remove(cnt); > }; <br/><br/> cAdd.id = "upload_add_" cnt; <br/> cRemove.id = "upload_remove_" cnt; <br/><br/> /* 生成されたすべての情報をコンテナに追加します */ <br/> this.target.appendChild(cFile ); <br/> this.target.appendChild(cAdd); <br/><br/> /* カウンタ 1 */ <br/> これ。 _cnt; <br/><br/> return this; <br/><br/>upload.prototype._removeNode = function (id) { <br/> var a=document.getElementById(id); 🎜> a.parentNode.removeChild (a); <br/>}; <br/><br/>upload.prototype.remove = function (n) { <br/> /* <br/> *ファイルを削除します <br/> */ <br/> this._removeNode( "upload_file_" n); <br/> /* <br/> *1 つ削除 add <br/> */ <br/> this._removeNode("upload_add_" n); > *1 つの削除を削除 <br/> */ <br/> this._removeNode("upload_remove_" n); <br/><br/> return this; <br/></script>


5. 関連する HTML コードを追加するだけです:



コードをコピーします
コードは次のとおりです:




<script> <br/>//長くなるのでここには載せません。 🎜><body><br/><p id="uploadContainer"><script> 🎜></script>
6. 効果はわかりましたが、追加されたものはすべて結合されていて、それを美しくする必要があります。どこから始めればよいでしょうか？ここには多くのオプションがあります:
1. 改行文字を追加します
2. アップロードごとにコンテナー p を追加します。

ここにコンテナーを追加します。将来何かを追加したい場合は、次のように追加することをお勧めします:

コードをコピーします。 コードは次のとおりです。