2017更新：それはあなたの人口統計が使用するブラウザに依然として依存します 。

「新しい」HTML5 file APIを理解する上で重要な点は、 IE 10までサポートされていなかったことです。 もしあなたが目指している特定の市場が、古いバージョンのWindowsに対して平均よりも高いプレミアムを持っているなら、あなたはそれにアクセスできないかもしれません。

2017年にはブラウザの約5％がIE 6,7,8,9のいずれかになりました。大企業（B2Bツールやトレーニング用に提供しているものなど）に入ると、その数はロケットになる可能性があります。 ほんの数ヶ月前、私は2016年に、自分のマシンの60％以上でIE8を使っている会社に対処しました。

だからあなたが何かをする前に、あなたのユーザーが使っているブラウザを調べてください 。 あなたがしなければ、あなたは、 "私のために働く"がクライアントへの成果物で十分ではないという理由で、素早く苦しい教訓を学ぶでしょう。

2008年の私の答えは次のとおりです。

ただし、ファイルアップロードの実行可能な非JSメソッドがあります。 ページでiframeを作成し（CSSで非表示にする）、フォームをターゲットにしてそのiframeに投稿することができます。 メインページは移動する必要はありません。

それは完全なインタラクティブではないので、「本当の」投稿です。 ステータスが必要な場合は、それを処理するために何かサーバ側が必要です。 これは、サーバーによって大きく異なります。 ASP.NETはより良い仕組みがあります。 PHPのプレーンは失敗しますが、 PerlやApacheの修正を使って回避することができます。

複数のファイルアップロードが必要な場合は、各ファイルを一度に1つずつ実行するのが最善です（最大ファイルアップロードの制限を克服するため）。 最初のフォームをiframeに投稿し、上記を使用して進捗状況を監視し、終了したら、iframeに2番目のフォームを投稿するなどします。

または、Java / Flashソリューションを使用します。 彼らは自分の投稿でできることにもっと柔軟に対応しています...

Jqueryで非同期にファイルをアップロードするには、以下の手順を使用します。

ステップ1あなたのプロジェクトで、Nugetマネージャを開いてパッケージを追加します（jquery fileupload（検索ボックスに書き込む必要があります）。URL：https : //github.com/blueimp/jQuery-File-アップロード

ステップ2上記のパッケージを実行して、プロジェクトに既に追加されているHTMLファイルに以下のスクリプトを追加します。

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

ステップ3次のコードに従ってファイルのアップロード制御を書き込みます。

<input id="upload" name="upload" type="file" />

ステップ4以下のように、uploadFileとしてjsメソッドを記述します。

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {

                   // progress
                },
                fail: function (e, data) {

                   //fail operation
                },
                stop: function () {

                  code for cancel operation
                }
            });

        };

ステップ5以下のようにプロセスを開始する準備完了関数呼び出し要素ファイルをアップロードします。

$(document).ready(function()
{
    uploadFile($('#upload'));

});

ステップ6以下のように、MVCコントローラとアクションを記述します。

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }

jQuery .ajax()簡単にアップロードできます。

HTML：

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

Javascript：

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

jQueryのファイルアップロードには、様々な既製のプラグインがあります。

この種のハッキングをアップロードするのは楽しい経験ではないので、人々は既成のソリューションを楽しんでいます。

ここにはいくつかあります：

• JQueryファイルアップローダ
• 複数ファイルアップロードプラグイン
• ミニ複数ファイルのアップロード
• http://blueimp.github.io/jQuery-File-Upload/

NPM（キーワードとして「jquery-plugin」を使用）またはGithubでさらに多くのプロジェクトを検索できます。

私はこれをRails環境で書いています 。 軽量のjQuery形式のプラグインを使用する場合は、わずか5行分のJavaScriptしかありません。

remote_form_forの標準が複数の部分からなるフォームの提出を理解していないため、AJAXアップロードをremote_form_forすることが課題です。 RailsがAJAXリクエストで取り戻すファイル・データを送信することはありません。

それがjQuery形式のプラグインです。

これはRailsのコードです：

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

関連するJavaScriptは次のとおりです。

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

そして、ここにRailsコントローラのアクション、かなりのバニラがあります：

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

私は過去数週間、Bloggityでこれを使ってきました。それはチャンピオンのように働いています。

あなたはかなり簡単にバニラのJavaScriptでそれを行うことができます。 私の現在のプロジェクトのスニペットは次のとおりです：

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

ここでは、ファイルをアップロードする方法の別の解決方法があります（ プラグインなし ）

シンプルなJavascriptとAJAX （プログレスバー付き）を使用すると、

HTML部分

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

JS部分

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

PHPの部分

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

EXAMPLEアプリケーションがあります

このAJAXファイルのアップロードjQueryプラグインはsomehwereファイルをアップロードし、その応答をコールバックに渡します。

• 特定のHTMLには依存しません。単に<input type="file">
• サーバーが特定の方法で応答する必要はありません
• 使用しているファイルの数やページ上の場所は関係ありません

- 少しでも使う -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- またはそれと同じくらい -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

これが私の解決です。

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

とjs

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

コントローラ

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    return Json(":)");
}

これまで私がこれまで行ってきた最もシンプルでロバストな方法は、フォームで非表示のiFrameタグをターゲットに設定することです。ページをリロードせずにiframe内で送信します。

つまり、プラグイン、JavaScript、またはHTML以外の他の形式の「マジック」を使用したくない場合です。 もちろん、これをJavaScriptと組み合わせることもできますし、何がありますか...

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

iframe onLoad内容を読み込んでサーバーのエラーや成功の応答を確認し、その結果をユーザーに出力することもできます。

Chrome、iFrame、およびonLoad

注 - アップロード/ダウンロードを行うときにUIブロッカーを設定する方法に興味がある場合は、読んでおく必要があります

現在のところ、Chromeはファイルを転送する際にiframeのonLoadイベントをトリガーしません。 Firefox、IE、およびEdgeはすべて、ファイル転送のためにonloadイベントを発生させます。

私が見つけた唯一の解決策は、クッキーを使用することでした。

アップロード/ダウンロードが開始されたときに基本的にそれを行うには：

• [クライアント側]クッキーの存在を探す間隔を開始する
• [サーバー側]ファイルデータに必要な処理を行います
• [サーバー側]クライアント側の間隔でCookieを設定する
• [Client Side] Intervalはクッキーを見て、それをonLoadイベントのように使います。 たとえば、UIブロックを開始してからonLoad（またはCookieが作成されたとき）で、UIブロッカーを削除することができます。

このためにクッキーを使用するのは醜いですが、動作します。

ダウンロード時にこの問題を処理するためのjQueryプラグインを作成しました。ここで見つけることができます

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

同様の基本原理がアップロードにも適用されます。

ダウンローダを使用するには（JSを含む、明らかに）

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

そして、サーバー側では、ファイルデータを転送する直前に、クッキーを作成します

 setcookie('iDownloader', true, time() + 30, "/");

プラグインはCookieを表示してから、 onCompleteコールバックをトリガーします。

シンプルなAjaxアップローダは別のオプションです：

https://github.com/LPology/Simple-Ajax-Uploader

• クロスブラウザ - IE7 +、Firefox、Chrome、Safari、Operaで動作する
• HTML5以外のブラウザでも複数の同時アップロードをサポート
• フラッシュなしまたは外部CSSなし - わずか5KbのJavascriptファイル
• オプションで、完全にクロスブラウザのプログレスバー（PHPのAPC拡張機能を使用）の組み込みサポート
• 柔軟性と高度にカスタマイズ可能 - アップロードボタンとして任意の要素を使用し、独自の進捗インジケーターをスタイルする
• フォームは必要ありません。アップロードボタンとして機能する要素を提供するだけです
• MITライセンス - 商用プロジェクトでの使用が自由

使用例：

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

将来の読者のためのラップアップ。

非同期ファイルアップロード

HTML5で

FormDataとFile APIがサポートされている場合（HTML5の両方の機能）、 $.ajax()メソッドを使用してjQueryを使用してファイルをアップロードできます。

FormDataを使用せずにファイルを送信することもできますが、 XMLHttpRequest （Ajax）を使用してファイルを処理できるように、File APIが存在する必要があります。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

迅速で純粋なJavaScript（ jQueryなし ）の例については、「 FormDataオブジェクトを使用してファイルを送信する 」 を参照してください。

後退する

HTML5がサポートされていない場合（ File APIなし ）、 XMLHttpRequestオブジェクトを使用せずに非同期要求をエミュレートできる隠しiframe技術は、他の純粋なJavaScriptソリューション（ Flashやその他のブラウザプラグインなし）のみです。

これは、ファイルの入力とともにフォームのターゲットとしてiframeを設定することから成り立っています。 ユーザーが送信すると、リクエストが行われ、ファイルがアップロードされますが、メインページを再描画するのではなく、応答がiframe内に表示されます。 iframeを非表示にすると、プロセス全体がユーザーに透過的になり、非同期要求がエミュレートされます。

正しく実行されていれば、どのブラウザでも動作するはずですが、iframeからの応答を取得する方法にはいくつかの注意点があります。

この場合、 iframe技術を使用するBifröstようなラッパープラグインを使用することもできますが、 jQuery Ajaxトランスポートを提供して、 $.ajax()メソッドだけでファイルを送信できるようにすることもできます 。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

プラグイン

BifröstはjQueryのajaxメソッドにフォールバックサポートを追加する小さなラッパーですが、 jQuery Form PluginやjQuery File Uploadなどのプラグインの多くは、HTML5からさまざまなフォールバックへのスタック全体と、プロセスを簡単にする便利な機能を含みます。 あなたのニーズと要件に応じて、裸の実装かこのプラグインのどちらかを検討したいかもしれません。

私が見つけた解決策は、 <form>が隠されたiFrameをターゲットにすることでした。 iFrameはJSを実行して、完了したことをユーザーに表示します（ページの読み込み時）。

私はいくつかの非常に強力なjQueryベースのファイルアップロードライブラリに出くわしました。 これらをチェックしてください：

1. Plupload
   • docs： http://www.plupload.com/docs : http://www.plupload.com/docs
2. jQueryファイルのアップロード
   • docs： https : //github.com/blueimp/jQuery-File-Upload
3. fineuploader.com
   • docs： http://docs.fineuploader.com/ : http://docs.fineuploader.com/

hereでは、プレビューしてフォームファイルをサーバーに送信するためのデモを使用して、解決されたソリューションを確認できます。あなたの場合、Ajaxを使用してサーバーへのファイルアップロードを容易にする必要があります。

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

提出されるデータはフォームデータです。jQueryでは、ボタンの代わりにフォーム送信機能を使用して、以下のようにフォームファイルを送信します。

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

here

HTML5とJavaScriptを使って、asyncをアップロードするのは簡単ですが、HTMLと一緒にアップロードロジックを作成しますが、これはapiが必要なので完全には機能しません/uploadが、Webサイトのルートからエンドポイントを呼び出すと、このコードはあなたのために働くはずです：

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}

<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

XMLHttpRequesに関するさらに詳しい情報：

XMLHttpRequestオブジェクト

最新のブラウザーはすべてXMLHttpRequestオブジェクトをサポートしています。XMLHttpRequestオブジェクトは、バックグラウンドでWebサーバーとデータを交換するために使用できます。つまり、ページ全体をリロードすることなく、Webページの一部を更新することができます。

XMLHttpRequestオブジェクトの作成

現代のブラウザ（Chrome、Firefox、IE7 +、Edge、Safari、Opera）には、すべてXMLHttpRequestオブジェクトが組み込まれています。

XMLHttpRequestオブジェクトを作成する構文：

変数=新しいXMLHttpRequest（）;

ドメイン間アクセス

セキュリティ上の理由から、最新のブラウザではドメイン間のアクセスを許可していません。

つまり、ロードしようとしているWebページとXMLファイルの両方が同じサーバー上に存在する必要があります。

W3Schoolsの例では、すべてW3SchoolsドメインにあるXMLファイルを開きます。

上記の例を自分のWebページの1つで使用する場合は、ロードするXMLファイルを自分のサーバーに配置する必要があります。

詳細については、here続きを読むことができhere ...

新しい Fetch APIはJavaScriptで使用できます。このような：

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

利点： Fetch APIは現代のすべてのブラウザでネイティブにサポートされているため、何もインポートする必要はありません。また、fetch（）はPromiseを返し、Promiseは.then(..code to handle response..)非同期で処理されます。

| HTML5のreadAsDataURL()またはいくつかのbase64エンコーダを使用して、ファイルをbase64に変換します。ここでフィドル

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

次に検索する：

window.open("data:application/octet-stream;base64," + base64);

探し非同期で、ファイルのアップロードプロセスの処理：ここでhttps://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

リンクからのサンプル

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

非同期複数ファイルのアップロードは、JavaScriptまたはjQueryを使用して行うことも、プラグインを使用せずに行うこともできます。進捗管理でファイルのアップロードの進行状況をリアルタイムで表示することもできます。私は2つの素敵なリンクに出くわしました -

1. プログレスバーを使用したASP.NET Webフォームベースのマルチファイルアップロード機能
2. jQueryで作成されたASP.NET MVCベースの複数ファイルアップロード

サーバー側の言語はC＃ですが、PHPのような他の言語でも動作させるためにいくつかの変更を加えることができます。

ファイルのアップロードASP.NET Core MVC：

ビューの作成ファイルアップロードコントロールで、html：

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

コントローラーにアクションメソッドを作成します。

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

hostingEnvironment変数は、次のような依存性注入を使用してコントローラに注入できるIHostingEnvironmentタイプです。

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}