jQuery Ajax方式でファイルをアップロードする方法

jQuery Ajax方式でファイルを2つのオブジェクトにアップロード
最初のオブジェクト:FormData
2番目のオブジェクト:XMLHttpRequest
現在、新版のFirefoxやChromeなどHTML 5をサポートするブラウザはこの2つのオブジェクトを完璧にサポートしていますが、IE 9はFormDataオブジェクトをサポートしていません.まだIE 6を使用していますか?天を仰いで嘆くしかない....
この2つのオブジェクトがあれば、Ajax方式でファイルをアップロードすることができます.
サンプルコード:

 
 
  function UpladFile() {
   var fileObj = document.getElementByIdx_x_x("file").files[0]; //       
   var FileController = "../file/save";     //             
   // FormData   
   var form = new FormData();
   form.append("author", "hooyes");      //         
   form.append("file", fileObj);       //     
   // XMLHttpRequest   
   var xhr = new XMLHttpRequest();
   xhr.open("post", FileController, true);
   xhr.onload = function () {
    alert("    !");
   };
   xhr.send(form);
  }

簡潔なコードは、Ajax方式でファイルをアップロードすることができます.上のコードでは、このような従来のファイルを選択する方法を使用してファイルオブジェクトを生成し、HTML 5では、指定した要素にファイルをドラッグ&ドロップするなど、より柔軟な方法をサポートしています.
Ajaxはファイルのアップロードに成功しましたが、進捗バーをどのように表示するかという問題が考えられます.この問題を持って、頭は考えることができて、Flash?ブラウザプラグイン?の
NO、今はこれらのものは必要ありません.
着手して、まず1つの進捗バーを作って、進捗バーも簡単で、HTML 5の新しく追加したラベルを使います:

これはブラウザに進捗バーが表示され、アップロード時にリアルタイムでValue値を変更し、進捗表示の問題を渡します.
私たちのサーバ側は変更する必要はなく、JSでXHRオブジェクトにイベントを追加するだけです.

xhr.upload.addEventListener("progress", progressFunction, false)

progressFunctionが呼び出されると、loadedとtotalの2つのプロパティがあり、それぞれアップロードされた値と、アップロードされる値を表します.
これはまさに私たちが必要としているので、この方法は、このように書くことができます.

function progressFunction(evt) {
   var progressBar = document.getElementByIdx_x_x("progressBar");
   if (evt.lengthComputable) {
    progressBar.max = evt.total;  
    progressBar.value = evt.loaded;
   }
  }

これで完了し、アップロードの進捗表示が表示されます.
次に、上記の最初のサンプルコードについて調整します.
サンプルコード2、進捗表示付き:

 
 
  function UpladFile() {
   var fileObj = document.getElementByIdx_x_x("file").files[0]; // js       
   var FileController = "../file/save";     //             
   // FormData   
   var form = new FormData();
   form.append("author", "hooyes");      //         
   form.append("file", fileObj);       //     
   // XMLHttpRequest   
   var xhr = new XMLHttpRequest();
   xhr.open("post", FileController, true);
   xhr.onload = function () {
    // alert("    !");
   };
   xhr.upload.addEventListener("progress", progressFunction, false);
   xhr.send(form);
  }
  function progressFunction(evt) {
   var progressBar = document.getElementByIdx_x_x("progressBar");
   var percentageDiv = document.getElementByIdx_x_x("percentage");
   if (evt.lengthComputable) {
    progressBar.max = evt.total;
    progressBar.value = evt.loaded;
    percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
   }
  } 
 


 
 
 
 

 
 

バックグラウンドでファイルを受信するプログラムは、任意の言語(C#,PHP,Pythonなど)で作成することができ、上記の例ではC#
簡単です.この進捗バーを変更する必要はありません.

var flist = Request.Files;
   for (int i = 0; i < flist.Count; i++)
   {
    string FilePath = "E:\\hooyes\\Files\\";
    var c = flist[i];
    FilePath = Path.Combine(FilePath, c.FileName);
    c.SaveAs(FilePath);
   }

以上述べたのは編集者が皆さんに紹介したjQuery Ajax方式のファイルアップロードの方法で、皆さんに役に立つことを望んでいます.もし皆さんが何か疑問があれば、私にメッセージを送ってください.編集者はすぐに皆さんに返事します.