HTML 5プレビュー可能なマルチピクチャajaxアップロード(formDataでデータを渡す)

22882 ワード

HTML 5プレビュー可能なマルチピクチャajaxアップロード(formDataでデータを渡す)
アップロード画像を紹介する前に、FormDataの基本的な使用を簡単に理解します.これらの基本的な知識を紹介した後、ajaxマルチピクチャアップロード前のプレビュー効果というdemoを最後に提供します.
1.formDataの基本的な使い方:まず空のオブジェクトインスタンスコードを作成します:var formData=new FormData();
1-1取得値はget(key)/getAll(key)によって対応するvalueを取得する.たとえば:

formData.get("name"); //   key name     。
formData.getAll("name"); //       ，  key name    。

たとえば、次のHTMLコードがあります.

DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>  title>
    head>
    <body>
      <form id="myForm">
        <input type="text" name="name" placeholder="       " />
        <input type="password" name="password" placeholder="       " />
    
        <input type="text" name="n1" />
        <input type="text" name="n1" />

        <input type="submit" id="submitId" value="  " />
      form>
      <script>
        //      
        var form = document.getElementById('myForm');
        var submitId = document.getElementById("submitId");
        submitId.addEventListener('click', function(e){
          e.preventDefault();
          var formData = new FormData(form);
          //     
          var name = formData.get("name");
          var psw = formData.get("password");
          console.log(name);  
          console.log(psw);

          //   getAll   name n1    
          var arrs = formData.getAll("n1");
          console.log(arrs);  //        

        }, false);

      script>
    body>
html>

1-2追加データはappend(key,value)で追加でき、指定したkeyが存在しない場合は追加データが追加され、keyが存在する場合はデータの末尾に追加されます.

var formData = new FormData();
formData.append('name', 'kongzhi1');
formData.append('name', 'kongzhi2');
formData.append('name', 'kongzhi3');

console.log(formData.get('name')); // kongzhi1
console.log(formData.getAll('name')); // ["kongzhi1", "kongzhi2", "kongzhi3"]

1-3変更データを設定するにはset(key,value)で変更データを設定し、指定したkeyが存在しない場合は追加し、存在する場合は対応する値を変更します.

var formData = new FormData();
formData.append("name", 'kongzhi1');
console.log(formData.getAll("name")); // ["kongzhi1"]

formData.set("name", 'kongzhi2');
console.log(formData.getAll("name")); // ["kongzhi2"]

1−4このデータが存在するか否かを判断するhas(key)により対応するkey値があるか否かを判断することができる.

var formData = new FormData();
formData.append("name", 'kongzhi1');
formData.append("name2", null);

console.log(formData.has("name")); // true
console.log(formData.has("name2")); // true
console.log(formData.has("name3")); // false

1−5削除データはdelete(key)により削除される.

var formData = new FormData();
formData.append("name", "kongzhi1");
formData.append("name", "kongzhi2");

console.log(formData.getAll("name")); // ["kongzhi1", "kongzhi2"]

formData.delete("name");
console.log(formData.getAll("name")); // []

2:XMLHttpRequest formDataアップロードファイルXMLHttpRequest 2を使用してFormDataタイプを定義し、Formをシーケンス化し、xhrデータ転送用にフォーム形式と同じデータを作成するのに便利です.ブラウザサポート:IE 9およびIE 9はサポートされていません.
原審XMLHttpRequest提出formDataデータは以下のdemoである.

DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>  title>
    head>
    <body>
      <form name='form1' id='form1'>
        <input type='file' name='imgFile' />
        <input type='text' name='name1' />
        <input type='text' name='name2' />

        <div id="uploadImg">    div>
      form>
      <script>
        var form1 = document.getElementById("form1");
        var uploadImg = document.getElementById("uploadImg");
        var xml = new XMLHttpRequest();

        uploadImg.addEventListener('click', function(e){
          e.preventDefault();
          var formData = new FormData(form1);
          xml.open("POST", url, true);
          xml.send(forData);
        });
      script>
    body>
html>

2-2 jquery ajax方式を使用してformDataデータをアップロードするには、次のようにします.
HTMLコードは次のとおりです.

<div id="container">
  <a href="javascript:void(0)" class="file">    
     <input type='file' id="file" multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
     <input type="hidden" />
   a>
div>

JAvascriptコードは次のとおりです.

var formdata = new FormData();
//            
formdata.append("imgFile", $('#file')[0].files[0]);
$.ajax({
  url: self.url,
  type: 'POST',
  cache: false,
  data: formdata,
  timeout: 5000,
  //  false    jQuery  formdata       
  // XMLHttpRequest   formdata        
  processData: false,
  //  false         Content-Type 
  contentType: false,
  xhrFields: {
    withCredentials: true
  },
  success: function(data) {

  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {

  }

上記のパラメータ設定の意味は、1.processData:falseです.data値はformdataオブジェクトなので、データの処理は必要ありません.2.cache:false、アップロードファイルはキャッシュする必要はありません.3.contentType:false、フォームで構成されたFormDataオブジェクトであり、属性enctype="multipart/form-data"が宣言されているため、ここでfalseに設定します.4.xhrFields:{withCredentials:true}、ドメイン間リクエスト設定
以下はajaxのformDataを使用して複数の画像をアップロードする前にプレビュー効果のdemoです.
formDataがajaxの複数の画像をアップロードする前のプレビュー効果は以下の通りです.
効果の表示
API使用方式及びgithub上のソースコード

Unicode中国語ソート

flannelネットワークのインストール