AjaxとHTML5をベースとしたファイルアップロード機能をMVCに実装

この記事では、MVC の Ajax と HTML5 に基づくファイル アップロード機能に関する関連情報を主に紹介します。必要な方は参考にしてください。

はじめに

実際のプログラミングでは、ファイルのアップロードと実装に関する問題がよく発生します。アップロードの進行状況を表示する機能 この記事では、Flash やファイルをアップロードするためのプラグインを使用せずに、進行状況を表示するファイル アップロード機能を実装する方法を紹介します。

基本機能: プログレスバー付きのファイルアップロード機能を実現

高度な機能: ファイルのドラッグアンドドロップによる複数ファイルのアップロード機能を実現

背景

HTML5は、ローカルファイルにアクセスする標準的な方法を提供します — ファイルAPI仕様 ファイル。ファイル API を呼び出すことで情報にアクセスでき、クライアントを使用して、アップロードされたファイルの種類とサイズが標準化されているかどうかを確認することもできます。

この仕様には、ファイルを使用するための以下のインターフェースが含まれています:

ファイルインターフェース: ファイルの「読み取り許可」があれば、ファイル名、タイプ、サイズなどを取得できます。

FileList インターフェイス: 個別に選択されたファイルのリストを指し、 またはドラッグ アンド ドロップを通じてユーザーが選択できるようにユーザー インターフェイスに表示できます。

XMLHTTPRequest2 は HTML5 の縁の下の力持ちです。XHR2 は XMLHttpRequest とほぼ同じですが、次のような多くの新機能も追加されています:

1. アップロード/ダウンロード バイナリ データの追加

2.アップロード プロセス ) イベント。これには複数の部分からなる情報が含まれます。

Total: 送信データの合計バイト数を指定するために使用される整数値。
Loaded: アップロードされたバイトを指定するために使用される整数値。
lengthComputable: アップロードされたファイルのサイズが計算可能かどうかを検出するために使用されるブール値。

3. クロスリソース共有リクエスト

これらの新機能により、Ajax と HTML5 がうまく連携し、Flash Player、外部プラグイン、または HTML の

タグを使用する必要がなくなります。完了すると、サーバー側にアップロードの進行状況バーが表示されます。

この記事では、次の機能を実現できる小さなアプリケーションを作成します:

単一のファイルをアップロードし、アップロードの進行状況情報を表示します。
写真をサーバーに送信するときに画像のサムネイルを作成します。
ファイルリストまたはドラッグアンドドロップ操作を通じて複数のファイルをアップロードします。
まず、ブラウザが XHR2、File API、FormData、ドラッグ アンド ドロップ操作をサポートしているかどうかを確認する必要があります。

コードの書き方

単一のファイルをアップロードし、アップロードの進行状況を表示するにはどうすればよいですか?

最初に行う必要があるのは、単純なビューを作成することです:

入力ファイル要素と送信ボタンで構成されるフォームを定義します。

Bootstrap の進行状況バーを使用して進行状況を表示します。

<p id="FormContent">
        <form id="FormUpload"
        enctype="multipart/form-data" method="post">
          <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <input type="file"
            name="UploadedFile" id="UploadedFile" />
          </span>
          <button class="btn btn-primary start"
          type="button" id="Submit_btn">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
          </button>
          <button class="btn btn-warning cancel"
          type="button" id="Cancel_btn">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>close</span>
          </button>
        </form>
        <p class="progress CustomProgress">
          <p id="FileProgress"
          class="progress-bar" role="progressbar"
      aria-valuenow="" aria-valuemin=""
      aria-valuemax="" style="width %;">
            <span></span>
          </p>
        </p>
        <p class="InfoContainer">
          <p id="Imagecontainer"></p>
          <p id="FileName" class="info">
          </p>
          <p id="FileType" class="info">
          </p>
          <p id="FileSize" class="info">
          </p>
        </p>
      </p>

Onchange イベントに入力ファイル要素を追加し、JS メソッド SingleFileSelected で使用します。これにより、ユーザーがファイルを選択して変更したときにこのメソッドが呼び出されます。このメソッドでは、入力ファイル要素を選択し、FileList のファイル オブジェクトにアクセスし、最初のファイル files[0] を選択して、ファイル名、ファイル タイプ、その他の情報を取得します。

 function singleFileSelected(evt) {
     //var selectedFile = evt.target.files can use this or select input file element 
     //and access it's files object
     var selectedFile = ($("#UploadedFile"))[].files[];//FileControl.files[];
     if (selectedFile) {
       var FileSize = ;
       var imageType = /image.*/;
       if (selectedFile.size > ) {
         FileSize = Math.round(selectedFile.size * / ) / + " MB";
      }
      else if (selectedFile.size > ) {
        FileSize = Math.round(selectedFile.size * / ) / + " KB";
      }
      else {
        FileSize = selectedFile.size + " Bytes";
      }
      // here we will add the code of thumbnail preview of upload images
      
      $("#FileName").text("Name " + selectedFile.name);
      $("#FileType").text("type " + selectedFile.type);
      $("#FileSize").text("Size " + FileSize);
    }
  }

は、ファイル リーダー オブジェクトを通じてメモリからアップロードされたファイルのコンテンツを読み取ることができます。 Reader オブジェクトは、多くのイベント、onload、onError、およびデータを読み取るための 4 つの関数 (readAsBinaryString()、readAsText()、readAsArrayBuffer()、readAsDataURL()) を提供し、result 属性はファイルの内容を表します。この属性は読み取り操作が完了した後にのみ有効であり、データ形式は呼び出された初期化された読み取り操作に基づいて決定されます。

ここではファイル リーダーについては詳しく説明しません。画像をプレビューするために SingleFileSelected メソッドで使用します:

 if (selectedFile.type.match(imageType)) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $("#Imagecontainer").empty();
          var dataURL = reader.result;
          var img = new Image()
          img.src = dataURL;
          img.className = "thumb";
          $("#Imagecontainer").append(img);
        };
        reader.readAsDataURL(selectedFile);
      }

ここまでで、次の図が表示されます。

次に、アップロードされたファイルをサーバーに送信する必要があるため、Onclick イベントを追加して、JS の UploadFile() メソッドで呼び出します。 コードは次のとおりです。

function UploadFile() {
     //we can create form by passing the form to Constructor of formData object
     //or creating it manually using append function 
     //but please note file name should be same like the action Parameter
     //var dataString = new FormData();
     //dataString.append("UploadedFile", selectedFile);
   
     var form = $('#FormUpload')[];
     var dataString = new FormData(form);
    $.ajax({
      url '/Uploader/Upload', //Server script to process data
      type 'POST',
      xhr function () { // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload) { // Check if upload property exists
          //myXhr.upload.onprogress = progressHandlingFunction
          myXhr.upload.addEventListener('progress', progressHandlingFunction, 
          false); // For handling the progress of the upload
        }
        return myXhr;
      },
      //Ajax events
      success successHandler,
      error errorHandler,
      completecompleteHandler,
      // Form data
      data dataString,
      //Options to tell jQuery not to process data or worry about content-type.
      cache false,
      contentType false,
      processData false
    });
  }

このメソッドでは、送信します。ファイル値を変換するには、append() メソッドを呼び出してフィールド値を一時停止するか、HTML フォームの FormData オブジェクトを取得することによって、formdata データのインスタンスを手動で作成できます。

progressHandlingFunction メソッドは、アップロードされたファイルのサイズを計算できるかどうかを確認し、e.loaded と e.total を使用してアップロードされたデータの割合を計算するメソッドを提供します。

function progressHandlingFunction(e) {
     if (e.lengthComputable) {
       var percentComplete = Math.round(e.loaded * / e.total);
       $("#FileProgress").css("width", 
       percentComplete + '%').attr('aria-valuenow', percentComplete);
       $('#FileProgress span').text(percentComplete + "%");
     }
     else {
       $('#FileProgress span').text('unable to compute');
    }
  }

データの送信と進行状況バーの提供という基本機能が実装されたので、アップロード アクション メソッドとアップダー コントローラーを使用して、サーバー側のコード処理を実装する必要があります。

アップロードメソッドでは、HttpPostedfileBaseオブジェクトからファイル情報を取得できます。このオブジェクトには、Filename属性、Contenttype属性、inputStream属性など、アップロードされたファイルの基本情報が含まれています。この情報は、ファイルが受信されたかどうかを確認するために使用できます。サーバーによってエラーが発生した場合、ファイルを保存するために使用することもできます。

 public JsonResult Upload(HttpPostedFileBase uploadedFile)
       {
         if (uploadedFile != null && uploadedFile.ContentLength > )
         {
           byte[] FileByteArray = new byte[uploadedFile.ContentLength];
           uploadedFile.InputStream.Read(FileByteArray, , uploadedFile.ContentLength);
           Attachment newAttchment = new Attachment();
          newAttchment.FileName = uploadedFile.FileName;
          newAttchment.FileType = uploadedFile.ContentType;
          newAttchment.FileContent = FileByteArray;
          OperationResult operationResult = attachmentManager.SaveAttachment(newAttchment);
          if (operationResult.Success)
          {
            string HTMLString = CaptureHelper.RenderViewToString
            ("_AttachmentItem", newAttchment, this.ControllerContext);
            return Json(new
            {
              statusCode = ,
              status = operationResult.Message,
              NewRow = HTMLString
            }, JsonRequestBehavior.AllowGet);
          }
          else
          {
            return Json(new
            {
              statusCode = ,
              status = operationResult.Message,
              file = uploadedFile.FileName
            }, JsonRequestBehavior.AllowGet);
          }
        }
        return Json(new
        {
          statusCode = ,
          status = "Bad Request! Upload Failed",
          file = string.Empty
        }, JsonRequestBehavior.AllowGet);
      }

ドラッグアンドドロップ操作で複数のファイルをアップロードすることはできますか？

このパートでは、同じアップローダーを実装し、いくつかの新しい機能をアップローダーに追加します。

允许选择多个文件
拖拽操作
现在给Uplodaer View添加新功能：

为输入文件元素添加多个属性，实现同时选择多个文件。

添加实现拖拽功能的文件，如以下代码所示：

 <p id="drop_zone">Drop images Here</p>

在JS方法MultiplefileSelected中添加onChange事件，与之前SingleFileSelected的写法类似，不同的是需要将所有的文件列出，并允许拖拽文件。代码如下：

 function MultiplefileSelected(evt) {
     evt.stopPropagation();
     evt.preventDefault();
     $('#drop_zone').removeClass('hover');
     selectedFiles = evt.target.files || evt.dataTransfer.files;
     if (selectedFiles) {
       $('#Files').empty();
       for (var i = ; i < selectedFiles.length; i++) {
         DataURLFileReader.read(selectedFiles[i], function (err, fileInfo) {
          if (err != null) {
            var RowInfo = &#39;<p id="File_&#39; + i + &#39;" 
            class="info"><p class="InfoContainer">&#39; +
                    &#39;<p class="Error">&#39; + err + &#39;</p>&#39; +
                   &#39;<p data-name="FileName" 
                   class="info">&#39; + fileInfo.name + &#39;</p>&#39; +
                   &#39;<p data-type="FileType" 
                   class="info">&#39; + fileInfo.type + &#39;</p>&#39; +
                   &#39;<p data-size="FileSize" 
                   class="info">&#39; + fileInfo.size() + 
                   &#39;</p></p><hr/></p>&#39;;
            $(&#39;#Files&#39;).append(RowInfo);
          }
          else {
            var image = &#39;<img src="&#39; + fileInfo.fileContent + 
            &#39;" class="thumb" title="&#39; + 
            fileInfo.name + &#39;" />&#39;;
            var RowInfo = &#39;<p id="File_&#39; + i + &#39;" 
            class="info"><p class="InfoContainer">&#39; +
                   &#39;<p data_img="Imagecontainer">&#39; + 
                   image + &#39;</p>&#39; +
                   &#39;<p data-name="FileName" 
                   class="info">&#39; + fileInfo.name + &#39;</p>&#39; +
                   &#39;<p data-type="FileType" 
                   class="info">&#39; + fileInfo.type + &#39;</p>&#39; +
                   &#39;<p data-size="FileSize" 
                   class="info">&#39; + fileInfo.size() + 
                   &#39;</p></p><hr/></p>&#39;;
            $(&#39;#Files&#39;).append(RowInfo);
          }
        });
      }
    }
  }

在该方法中，将选择和拖拽文件操作的变量设置为全局变量selectedFiles，然后扫描 selectedfiles中的每个文件，将从 DataURLreader对象中调用Read 方法读取文件。

DataURLreader对象可调用read方法，并将File对象和回调方法作为read方法参数，在上述方法中我们创建了FileReader，并修改了FileReader的Onload和onerror回调函数。调用 readAsDataURL 方法来读文件。

新建FileInfo对象包括了所有的文件信息及内容。

 var DataURLFileReader = {
     read function (file, callback) {
       var reader = new FileReader();
       var fileInfo = {
         name file.name,
         type file.type,
         fileContent null,
         size function () {
           var FileSize = ;
          if (file.size > ) {
            FileSize = Math.round(file.size * / ) / + " MB";
          }
          else if (file.size > ) {
            FileSize = Math.round(file.size * / ) / + " KB";
          }
          else {
            FileSize = file.size + " bytes";
          }
          return FileSize;
        }
      };
      if (!file.type.match('image.*')) {
        callback("file type not allowed", fileInfo);
        return;
      }
      reader.onload = function () {
        fileInfo.fileContent = reader.result;
        callback(null, fileInfo);
      };
      reader.onerror = function () {
        callback(reader.error, fileInfo);
      };
      reader.readAsDataURL(file);
    }
  };

使用拖拽操作选择

由于大部分浏览器现在已经执行拖拽操作，为了实现拖拽操作，在drop_zone 元素中添加dragover和drop事件。

         var dropZone = document.getElementById('drop_zone');
         dropZone.addEventListener('dragover', handleDragOver, false);
         dropZone.addEventListener('drop', MultiplefileSelected, false);
         dropZone.addEventListener('dragenter', dragenterHandler, false);
         dropZone.addEventListener('dragleave', dragleaveHandler, false);

当文件拖到目标位置时触发dragover事件，在以下代码中，我们修改了默认浏览器及datatransfer的dropEffect 属性，代码如下：

  function handleDragOver(evt) {
     evt.preventDefault();
     evt.dataTransfer.effectAllowed = 'copy';
     evt.dataTransfer.dropEffect = 'copy';
   }

接着在MultiplefileSelected中添加drop事件来处理文件drop操作。

大部分功能已经完善，现在需要添加“上传按钮”，通过Onclick事件来调用UploadMultipleFiles方法。

该方法与上文提到的Uploadfile方法类似，不同的是手动验证formdata对象值。

   function UploadMultipleFiles() {
     // here we will create FormData manually to prevent sending mon image files
     var dataString = new FormData();
     //var files = document.getElementById("UploadedFiles").files;
     for (var i = ; i < selectedFiles.length; i++) {
       if (!selectedFiles[i].type.match(&#39;image.*&#39;)) {
         continue;
       }
      }
  // AJAX Request code here
  }

接下来添加服务器端处理代码，与上文添加的代码类似，需要做的就是接受一系列的文件列表，如下：

  public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)

确保 HttpPostedFileBase 数组名称与append 方法中的名称相同，只有这样，MVC才能映射到文件数组中。

 public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)
  dataString.append("uploadedFiles", selectedFiles[i]); 

上传大文件

为了允许上传大文件，如果使用的是 IIS7及以上版本，需要修改Web.config 文件，添加以下代码：

<system.webServer>
      <security>
           <requestFiltering>
                <requestLimits maxAllowedContentLength="" />
           </requestFiltering>
      </security>
   </system.webServer>
   <httpRuntime targetFramework="." maxRequestLength=""/>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

初步了解JavaScript，Ajax，jQuery，并比较三者关系

jquery与php结合实现AJAX长轮询

js ajax加载时的进度条代码

以上がAjaxとHTML5をベースとしたファイルアップロード機能をMVCに実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。