Ajaxのファイルのアップロード、VUE axiosファイルのアップロード

アヤックスは、ファイルアップロードの互換性の問題を行う必要があります。ブラウザだけの少数の高いバージョンが、ファイルのアップロード機能を実装することができます。ブラウザのIE6 IE7低いバージョンを達成することができません。AJAXファイルアップロード使用FORMDATAので、それは新しいH5で、互換性の問題があり、ブラウザの低いバージョンがサポートされていません。

FORMDATAにデータが追加しました：

0 - appendメソッドを呼び出すFORMDATAネイティブファイルのDOMオブジェクトを使用してファイルをアップロードするために取得します。髪aiax要求は、POSTリクエストメソッドで、属性を追加します。

ネイティブAJAXは、コードをアップロードします。

<！DOCTYPE HTML> 
<HTML> 

<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <タイトル> </ TITLE> 
</ HEAD> 

<BODY> 

  <P>データ</ P> <入力のid = 'データ'タイプ= "ファイル" NAME = "データ" /> 
  <P>型</ P> <入力されたID = 'INPUT1' TYPE = "テキスト"値= '画像/ JPG' NAME = "タイプ" /> 
  <INPUT TYPE = "ボタン"値= "添加文件" ID = /> "BTN" 

</ BODY> 

</ HTML> 
<スクリプト> 

  btn.onclick =関数（）{ 
    //前后端交互
    VAR XHR =新規のXMLHttpRequest（）; 
    xhr.open（ "POST"、 "请求接口"、真の）;
    =関数xhr.onreadystatechange（）{ 
      IFは（xhr.readyState == == 200は&& xhr.status 4である。）{ 
        フラグ= xhr.responseTextにおいてVAR; //に対する応答取り戻す
        はconsole.log（INフラグ）; 
      } 
    } 
  } 

</スクリプト>

jQueryのAJAXは、コードをアップロードします。

注：以下の3つの属性送信要求AJAXを追加するには与えられずに

キャッシュ：偽

PROCESSDATA：偽

contentTypeの：偽

<！DOCTYPE HTML> 
<HTML> 

<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <タイトル> </ TITLE> 
  <スクリプトSRC = "https://cdn.staticfile.org/jquery/1.10.2/jquery .min.js "> </ SCRIPT> 
</ head> 

<body> 

  <P>データ</ P> <入力ID = 'データ' TYPE ="ファイル」NAME = "データ" /> 
  <P>型</ P> <入力ID = 'INPUT1' TYPE = "テキスト"値= '画像/ JPG' NAME = "タイプ" /> 
  <INPUT TYPE = "ボタン"値= "添加文件" ID = "BTN"のonclick = "試験（）;」/> 

</ BODY> 

</ HTML> 
<スクリプト> 

  機能テスト（）{ 
    VAR FORMDATA =新しいいるFormData（）。

    formData.append（ "タイプ"、input1.value）。
    formData.append（ "データ"、data.files [0]）。

    $アヤックス（{  
      URL： "请求接口"、
      メソッド： "POST"、 
      キャッシュ：falseに、//キャッシュファイルを設定しないでください
      FORMDATA、：データ
      PROCESSDATA：falseに、//データを文字列に変換されていない
      のcontentType：アップロードファイルは、その動作はJQuery回避するために偽の、// 
      成功を：関数（結果）{ 
        にconsole.log（結果）; 
      } 
    }）
  } 

</ SCRIPT>

Vueのaxiosは、コードをアップロードします。

      聞かせてFORMDATA =新しいいるFormData（）; 
      formData.append（ 'タイプ'、input1.value）。
      formData.append（ 'データ'、data.files [0]）。

      axios（{ 
        メソッド： 'ポスト'、
        URL： "请求接口" 
        データ：FORMDATA、
        ヘッダー：{ 
          'のContent-Type'： 'マルチパート/フォームデータ' 
        } 
      }）
        .then（RES => { 
        }）
        .catch （ERR => { 
        }）。

Ajaxのファイルのアップロード、VUE axiosファイルのアップロード

おすすめ