JavaScriptとフォームの高度な学習-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptとフォームの高度な学習

伊谢尔伦

Nov 21, 2016 pm 01:55 PM

formjavascript

前書き

前回の記事「フォームフォームからフロントエンドデータとバックエンドデータのやりとりについて話そう」では、ブラウザとサーバー間の接続の一部を説明しましたが、フォームフォームについてはある程度マスターできたようです。、しかし現実は残酷です、私は前の記事でクリックしたばかりのフォームフォームに関する大きな知識があることを最近のプロジェクトで発見しました。このコンテンツ、つまりファイルのアップロードには非常に多くの用途があります。

1. FormData

前回の記事でフォームを整理する方法としてjqueryのserializeArray関数を使うと書きましたが、この方法はinput[type="file"]に対して無効であり、フォームの内容を統合することができません。関連する問題については、jquery の公式問題を参照してください: https://bugs.jquery.com/ticket/2656。説明は次のとおりです:

serialize メソッドはファイルの内容を取得できないため、ファイルフォームフィールドをシリアル化する必要がある理由がわかりません。取得するには、Ajax ファイルアップロードプラグインの 1 つを使用する必要があります。 the content via AJAX.

それではプラグインを使わずに送信されたフォームを取得することはできるのでしょうか？もちろんです!

1.1. FormDataの役割

これが今回紹介するFormDataです。 FormData の MDN 説明によると:

FormData インターフェイスは、フィールドと値を表すキーと値のペアを構築する簡単な方法を提供し、`XMLHttpRequest.send()` を通じてサーバーに簡単に送信できます。フォームのエンコーディングタイプが `multipart/form-data` に設定されている場合と同じ形式を使用します。

FormData オブジェクトは、`entries()` の代わりに `for...of` を使用して走査できます。 `for (var p of myFormData)` は ` for (var p of myFormData.entries()) `

と同等です。

この説明で、少なくとも 2 つの点を理解できました。

FormData は、通常、input[type="file"] フォームを使用して、マルチパート/フォームデータエンコーディングタイプのフォームを処理するために使用できます。 ...でチェックスルーできます。 (このオブジェクトはブラウザの console.log を使用して印刷することはできません)

次に、一部の子供たちは間違いなく尋ねます:

input[type="file"] タイプを使用せずに FormData を使用して送信するのはフォームでは不可能ですか?

FormData を使用して、input[type="file"] がなく、エンコードタイプ x-www-form-urlencoded を使用するフォームを送信するとどうなりますか?

FormData を使用しない場合、input[type="file"] を指定してフォームを送信することはできませんか?

そして、デモを使ってこれら 2 つの問題を説明します:

はい、この時点のエンコーディングタイプは multipart/form-data です。つまり、フォーム送信メソッドは大まかに次のようになります:

これがわかります。エンコードタイプによりフォームが一意になります。サーバー側で Express4 以降を使用している場合は、このタイプのリクエストを処理するために追加のミドルウェアをインストールする必要があります。そうしないと、req.body、req.param、および req.query にフォームデータが見つかりません。これらについては後で説明します。では、なぜこの単純なフォームを送信するためにこの方法を使用することをまだ推奨しないのでしょうか (これはほとんどの Web サイトの場合です):

送信したフォームがほんの数文字であることに気づいたはずですが、これらの境界を追加すると、原因フォームデータが大きくなったため、最も効率的なバイナリエンコードでも、フォームデータを MIME ヘッダーに直接書き込むよりも時間がかかります。

ヒント: ただし、x-www-form-urlencoded は、これらの非英数字文字を処理するのに苦労します。これは、ブラウザーがこれらの非英数字文字を %HH に変換するためです。つまり、各非英数字文字は次のように表されます。置換するのに 3 バイト必要ですが、フォームが非常に長い場合には非常に不親切なので、multipart/form-data が登場しました。

その場合、2 番目の質問に答えると、サーバー (express4) に req.body が表示されます。 '"user"rnrnddrn-----WebKitFormBoundary5Kj2oSfHZKrZjYjsrnContent-Disposition: form-data; name="email"rnrnddddrn-----WebKitFormBoundary5Kj2oSfHZKrZjYjs--rn' }

コードをコピーします
ほら、こうすればこうなりますサーバーはそれを解析しますか？ ? ?これは私自身に迷惑をかけるだけです。

FormData の haunted を使用しない場合は、純粋な AJAX を使用して送信することもできます。詳細については、https://developer.mozilla.org/en-US/docs/ を参照してください。 Web/API/XMLHttpRequest/XMLHttpRequest の使用#フォームの送信とファイルのアップロード

1.2. 結論

まとめると、input[type="file"] を含むフォームや英数字以外の文字が多く含まれるフォームを使用する場合は、フォームを送信してエンコードする FormData タイプは multipart/form-data である必要があります。大まかに使用される例は次のとおりです:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">
    <title>testing form group</title>
    <script type="text/JavaScript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/JavaScript">
    function onSubmit(){
        var myForm = document.getElementById(&#39;form&#39;);
        var formData = new FormData(myForm);
        for (var p of formData){
            console.log(p);
        }
        $.ajax({
            type: &#39;POST&#39;,
            url: &#39;/get&#39;,
            data: formData,
            dataType: &#39;json&#39;,
            processData: false,
            contentType: false,
            success: function(data){console.log(data)},
            error: function(jqXHR){console.log(jqXHR)},
        })
    }
    </script>
</head>  
<body>  
    <form action="" method="post" name=&#39;info&#39; id=&#39;form&#39;>
        <input type="text" name="user" />
        <input type="text" name="email" />
        <input type="file" name="file" />
        <input type="file" name="file1" />
    </form>
    <button type="button" name=&#39;submit&#39; onclick="onSubmit()">提交</button>
</body>  
</html>

注
jquery がデータをさらに処理しないように、$.ajax で processData: false および contentType: false を構成しました:

processData (デフォルト: true)

Type: Boolean

デフォルトでは、データによってdata オプションで渡されたものがオブジェクトである場合 (技術的に言えば、文字列でない限り)、デフォルトのコンテンツタイプ「application/x-www-form-」に一致するように処理され、クエリ文字列に変換されます。 URLコード化されています。」 DOM ツリー情報または変換したくないその他の情報を送信する場合は、false に設定します。

1.3、FormData API
FormData.append(): 既存のキーに新しい値を追加するか、新しいキーを追加します。

FormData.delete(): キーと値のペアを削除します

FormData.entries (): オブジェクト内のキーと値のペアを走査できるように反復子を返します。

FormData.get(): 最初に指定されたキーの値を返します。

FormData.getAll(): 指定されたキーの値を返します。すべての値の配列

FormData.has(): FormData オブジェクトに指定されたキーと値のペアがあるかどうかを判断します

FormData.keys(): すべてのキーと値のペアのキーの反復を許可する反復子を返します

FormData.set(): 既存のキーの値を変更するか、新しいキーと値のペアを追加します

FormData.values(): すべてのキーと値のペアの値を走査できるようにイテレータを返します

2. input[type= "file"] について

このタイプの入力については、言及する必要がある点がいくつかあります。そうでない場合は、次回忘れることになります:

複数のファイルを選択するには、multiple 属性を使用します。一度、accept 属性を使用して、対応する MIME タイプを実行します。

$(element).files は、アップロードされたファイルの名前とアップロードされたファイルの数 (.name と length) を取得します。

ファイルをアップロードする場合、ファイル名またはサフィックスを確認する必要がある場合があります。このとき、xxx-vx.x.{json| の形式を確認する場合は正規表現が役に立ちます。 (bower-v0.1.json など)、使用される正規表現は次のとおりです:

var reg = /^\w+\-v\d+\.{1}\d+\.(json|yaml)$/i;  
/*Check if the user has not selected uploaded file*/
    if ($(Element).val() === &#39;&#39;){
      finalRes.delete(&#39;file&#39;);
    } else {
      var fileCount = $(Element)[0].files.length;
      for (var i = 0; i < fileCount; i++) {
        if (reg.test($(Element)[0].files[i].name )){
          console.log(&#39;match&#39;);
        }else{
          alert(&#39;上传的文件名格式不正确&#39;);
          return;
        }
      }
    }

その後、サフィックスを削除するときに、 replace(/.(json|yaml)$/, '' ) を使用してサフィックスを削除できます。。 4. フォームをクリアするための優れた関数は次のとおりです:

function clearAllFields(){
    $(&#39;:input&#39;,&#39;#project-info&#39;)
    .not(&#39;:button, :submit, :reset, :hidden&#39;)
    .val(&#39;&#39;)
    .removeAttr(&#39;checked&#39;)
    .removeAttr(&#39;selected&#39;);
  }

$(element) はアップロードしたファイルの入力タグを表すことに注意してください。

finalRes は、新しい FormData

3 の Express サーバー側処理

Express4 のインストール後のフォーム値です。このようなパッケージはたくさんありますが、私は multiparty ミドルウェアを使用することにしました。具体的な利用方法については公式サイト https://github.com/expressjs/node-multiparty をご参照ください。

このミドルウェアを使用するには 2 つの方法があります:

イベント監視を使用する

コールバックを使用する

プロジェクトでコールバックを使用しました:

router.post(&#39;/get&#39;, function(req, res, next) {  
  var form = new multiparty.Form();
  form.parse(req, function(err, fields, files) {
    if (fields === undefined || files === undefined){
      console.log(&#39;client send empty data  in posting new project&#39;);
      return res.status(200).json({err:"请求数据为空，请重新提交", status:&#39;failure&#39;});
    }
    console.log(fields, files);
    console.log(&#39;Upload completed!&#39;);
  });
});

フィールドとファイル内フィールドは名前に従って編成されています最初のセクションのフロントエンドコードを例として挙げると、この時点での結果は次のようになります:

{ user: [ &#39;test&#39; ], email: [ &#39;test1&#39; ] } 
{ file: 
   [ { fieldName: &#39;file&#39;,
       originalFilename: &#39;test.html&#39;,
       path: &#39;/home/private/test/QForTTWBipWSPSTpKsUGlRHE.html&#39;,
       headers: [Object],
       size: 876 } ],
  file1: 
   [ { fieldName: &#39;file1&#39;,
       originalFilename: &#39;test1.html&#39;,
       path: &#39;/home/private/test/aT5T2B_pkkxEVv5OUzjjCxIB.html&#39;,
       headers: [Object],
       size: 558 } ] }

に従って、デフォルトファイルはデフォルトファイルフォルダーにアップロードされています。公式サイトの説明によると、初期化時にuploadDirが設定されていない場合は、システムのos.tmpdir()にアップロードされます。
イベントタイプの実装についても、公式Webサイトで提供されているデモを参照できます。

声明

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

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

メモ帳++7.3.1

使いやすく無料のコードエディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、