Implémentation de la fonction de téléchargement de fichiers basée sur Ajax et HTML5 dans MVC

Cet article présente principalement les informations pertinentes sur la fonction de téléchargement de fichiers basée sur Ajax et HTML5 dans MVC. Les amis qui en ont besoin peuvent s'y référer

Introduction

. Dans la pratique réelle En programmation, nous rencontrons souvent la fonction de téléchargement de fichiers et d'affichage de la progression du téléchargement. Pour cela, cet article vous présentera comment implémenter la fonction de téléchargement de fichiers avec affichage de la progression sans utiliser Flash ni aucun plug-in pour le téléchargement. fichiers.

Fonction de base : réalisez la fonction de téléchargement de fichiers avec barre de progression

Fonction avancée : réalisez la fonction de téléchargement de plusieurs fichiers en glissant et déposant des fichiers

Arrière-plan

HTML5 fournit une méthode standard d'accès aux fichiers locaux - la spécification de l'API File est accessible en appelant l'API File, et le client peut également être utilisé pour vérifier le type et la taille de la spécification téléchargée.

Cette spécification inclut les interfaces suivantes pour utiliser les fichiers :

Interface de fichier : dispose d'une "autorisation de lecture" pour le fichier et peut obtenir le nom du fichier, son type, sa taille, etc.

Interface FileList : fait référence à une liste de fichiers sélectionnés individuellement, qui peut être présentée à l'interface utilisateur pour la sélection de l'utilisateur via ou par glisser-déposer.

XMLHTTPRequest2 est le héros méconnu de HTML5. XHR2 est à peu près le même que XMLHttpRequest, mais il ajoute également de nombreuses nouvelles fonctionnalités, comme suit :

1. Ajout de données binaires de téléchargement/téléchargement

.

2. Ajout de l'événement Progress (barre de progression) pendant le processus de téléchargement, qui contient plusieurs parties d'informations :

Total : une valeur entière utilisée pour spécifier le nombre total d'octets de données transmises.
Chargé : valeur entière, utilisée pour spécifier les octets téléchargés.
lengthComputable : la valeur booléenne est utilisée pour détecter si la taille du fichier téléchargé est calculable.

3. Demande de partage entre ressources

Ces nouvelles fonctionnalités permettent à Ajax et HTML5 de bien fonctionner ensemble, rendant le téléchargement de fichiers très simple, sans avoir besoin d'utiliser Flash Player, des plug-ins externes ou HTML. La balise

peut être complétée et la barre de progression du téléchargement peut être affichée en fonction du côté serveur.

Cet article écrira une petite application qui peut réaliser les fonctions suivantes :

Télécharger un seul fichier et afficher les informations de progression du téléchargement.
Créez des vignettes d'images lors de l'envoi d'images au serveur.
Téléchargez plusieurs fichiers via la liste de fichiers ou par glisser-déposer.
Nous devons d’abord vérifier si le navigateur prend en charge XHR2, File API, FormData et les opérations de glisser-déposer.

Écrire du code

Comment télécharger un seul fichier et afficher la progression du téléchargement ?

La première chose que vous devez faire est de créer une vue simple :

Définir un formulaire composé d'un élément de fichier d'entrée et d'un bouton de soumission.

Utilisez la barre de progression Bootstrap pour afficher la progression.

<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>

Ajoutez l'élément du fichier d'entrée dans l'événement Onchange et utilisez-le dans la méthode JS SingleFileSelected, afin qu'il soit appelé lorsque l'utilisateur sélectionne et modifie le fichier Cette méthode. Dans cette méthode, nous sélectionnerons l'élément du fichier d'entrée et accéderons à l'objet fichier de FileList, en sélectionnant le premier fichier files[0], afin que nous puissions obtenir le nom du fichier, le type de fichier et d'autres informations.

 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);
    }
  }

Vous pouvez lire le contenu des fichiers téléchargés depuis la mémoire via l'objet Lecteur de fichiers. L'objet lecteur fournit de nombreux événements, onload, onError et quatre fonctions pour lire les données : readAsBinaryString(), readAsText(), readAsArrayBuffer(), readAsDataURL(), et l'attribut result représente le contenu du fichier. Cet attribut n'est valide qu'une fois l'opération de lecture terminée et le format des données est déterminé en fonction de l'opération de lecture initialisée appelée.

Je n'expliquerai pas le lecteur de fichiers en détail ici. Nous l'utiliserons dans la méthode SingleFileSelected pour prévisualiser les images :

 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);
      }

<🎜. >

Jusqu'à présent, vous pouvez voir l'image suivante :

Vous devez maintenant envoyer le fichier téléchargé au serveur, alors ajoutez l'événement Onclick et ajoutez-le dans JS uploadFile() Appelé dans la méthode, le code est le suivant :

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
    });
  }

Dans cette méthode, envoyez le formulaire et utilisez l'objet de données Form pour sérialiser la valeur du fichier, que nous pouvons créer manuellement. Instanciation des données formdata, en appelant la méthode append() pour suspendre la valeur du champ, ou en récupérant l'objet FormData du formulaire HTML.

La méthode progressHandlingFunction vérifiera si la taille du fichier téléchargé peut être calculée et utilisera e.loaded et e.total pour calculer le pourcentage de données téléchargées.

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');
    }
  }

Maintenant que les fonctions de base d'envoi de données et de fourniture d'une barre de progression ont été implémentées, l'étape suivante consiste à implémenter le traitement du code côté serveur, en utilisant la méthode d'action de téléchargement et le contrôleur uplpader.

Dans la méthode de téléchargement, vous pouvez obtenir des informations sur le fichier à partir de l'objet HttpPostedfileBase. Cet objet contient des informations de base sur le fichier téléchargé telles que l'attribut Filename, l'attribut Contenttype, l'attribut inputStream, etc. Ces informations peuvent être utilisées pour vérifier. côté serveur, il peut également être utilisé pour enregistrer des fichiers s'il y a des erreurs dans les fichiers reçus.                                                                                                                                                                                                                                                            Est-il possible de télécharger plusieurs fichiers par glisser-déposer ?

Dans cette partie, implémentez le même téléchargeur et ajoutez quelques nouvelles fonctionnalités au téléchargeur :

允许选择多个文件
拖拽操作
现在给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加载时的进度条代码

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!