MVC中基于Ajax和HTML5實(shí)現(xiàn)文件上傳功能

更新時(shí)間：2015年10月09日 11:35:14 作者：葡萄城控件技術(shù)團(tuán)隊(duì)

這篇文章主要介紹了MVC中基于Ajax和HTML5實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下

引言

在實(shí)際編程中，經(jīng)常遇到實(shí)現(xiàn)文件上傳并顯示上傳進(jìn)度的功能，基于此目的，本文就為大家介紹不使用flash 或任何上傳文件的插件來(lái)實(shí)現(xiàn)帶有進(jìn)度顯示的文件上傳功能。

基本功能：實(shí)現(xiàn)帶有進(jìn)度條的文件上傳功能

高級(jí)功能：通過(guò)拖拽文件的操作實(shí)現(xiàn)多個(gè)文件上傳功能

背景

HTML5提供了一種標(biāo)準(zhǔn)的訪問(wèn)本地文件的方法——File API規(guī)格說(shuō)明，通過(guò)調(diào)用File API 能夠訪問(wèn)文件信息，也可以利用客戶(hù)端來(lái)驗(yàn)證上傳文件的類(lèi)型和大小是否規(guī)范。

該規(guī)格說(shuō)明包含以下幾個(gè)接口來(lái)使用文件：

File接口：具有文件的“讀權(quán)限”，可以獲取文件名，類(lèi)型，大小等。

FileList接口：指單獨(dú)選定的文件列表，可以通過(guò)<input type="file">或拖拽呈現(xiàn)在用戶(hù)界面供用戶(hù)選擇。

XMLHTTPRequest2是HTML5的無(wú)名英雄，XHR2與XMLHttpRequest大體相同，但同時(shí)也添加了很多新功能，如下：

1. 增加了上傳/下載二進(jìn)制數(shù)據(jù)

2. 增加了上傳過(guò)程中Progess （進(jìn)度條）事件，該事件包含多部分的信息：

Total：整型值，用于指定傳輸數(shù)據(jù)的總字節(jié)數(shù)。
Loaded：整型值，用于指定上傳的字節(jié)。
lengthComputable：Bool值用于檢測(cè)上傳文件大小是否可計(jì)算。

3. 跨資源共享請(qǐng)求

這些新特性都使得Ajax和HTML5很好的協(xié)作，讓文件上傳變得非常簡(jiǎn)單，不再需要使用Flash Player、外部插件或html的<form>標(biāo)簽就可以完成，根據(jù)服務(wù)器端就可以顯示上傳進(jìn)度條。

本文會(huì)編寫(xiě)一個(gè)小型應(yīng)用程序，能夠?qū)崿F(xiàn)以下功能：

上傳單個(gè)文件，提供上傳進(jìn)度信息顯示。
將圖片發(fā)送到服務(wù)器時(shí)，創(chuàng)建圖像縮略圖。
通過(guò)文件列表或拖拽操作實(shí)現(xiàn)多個(gè)文件上傳。
首先我們需要檢驗(yàn)瀏覽器是否支持XHR2,File API,FormData及拖拽操作。

編寫(xiě)代碼

如何上傳單個(gè)文件并顯示上傳進(jìn)度？

首先需要做的是創(chuàng)建簡(jiǎn)單的View :

定義一個(gè)表單，由輸入文件元素和提交按鈕組成。

使用Bootstrap 進(jìn)度條顯示進(jìn)度。

<div 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>
        <div class="progress CustomProgress">
          <div id="FileProgress"
          class="progress-bar" role="progressbar"
      aria-valuenow="" aria-valuemin=""
      aria-valuemax="" style="width %;">
            <span></span>
          </div>
        </div>
        <div class="InfoContainer">
          <div id="Imagecontainer"></div>
          <div id="FileName" class="info">
          </div>
          <div id="FileType" class="info">
          </div>
          <div id="FileSize" class="info">
          </div>
        </div>
      </div>

在Onchange 事件中添加輸入文件元素，并在JS方法SingleFileSelected使用，因此在用戶(hù)選擇和修改文件時(shí)都會(huì)調(diào)用此方法。在該方法中，我們將選擇輸入文件元素和訪問(wèn)FileList的文件對(duì)象，選擇第一個(gè)文件files[0]，因此我們可以得到文件名，文件類(lèi)型等信息。

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

可以通過(guò)File reader對(duì)象從內(nèi)存讀取上傳文件內(nèi)容。reader 對(duì)象提供很多事件，onload,onError以及四種讀取數(shù)據(jù)的函數(shù)readAsBinaryString(), readAsText()，readAsArrayBuffer(), readAsDataURL(),result屬性表示文件內(nèi)容。該屬性只有當(dāng)讀操作執(zhí)行完成后才有效，數(shù)據(jù)格式根據(jù)調(diào)用的初始化讀操作制定的。

在這里就不詳細(xì)解釋File reader，我們會(huì)在SingleFileSelected 方法中使用，用于預(yù)覽圖像，查看代碼：

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

到現(xiàn)在為止，就可看到下圖：

現(xiàn)在需要將已上傳的文件發(fā)送到服務(wù)器，因此添加Onclick事件，并在JS uploadFile()方法中調(diào)用，代碼如下：

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

在該方法中，發(fā)送表單，使用Form 數(shù)據(jù)對(duì)象來(lái)序列化文件值，我們可以手動(dòng)創(chuàng)建formdata數(shù)據(jù)的實(shí)例化，通過(guò)調(diào)用append()方法將域值掛起，或是通過(guò)檢索HTML 表單的FormData對(duì)象。

progressHandlingFunction方法會(huì)提供檢驗(yàn)上傳文件Size 是否可計(jì)算，使用e.loaded和e.total計(jì)算出已上傳百分之多少的數(shù)據(jù)。

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

現(xiàn)在已經(jīng)實(shí)現(xiàn)了基本的發(fā)送數(shù)據(jù)及提供進(jìn)度條的功能，接下來(lái)需要實(shí)現(xiàn)服務(wù)器端的代碼處理，使用upload action方法和uplpader controller 。

在upload 方法中，可以從HttpPostedfileBase對(duì)象中獲取文件信息，該對(duì)象包含上傳的文件的基本信息如Filename屬性，Contenttype屬性，inputStream屬性等內(nèi)容，這些信息都可以用來(lái)驗(yàn)證服務(wù)器端接收的文件是否有錯(cuò)，也可以用來(lái)保存文件。

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

能否通過(guò)拖拽操作實(shí)現(xiàn)多個(gè)文件上傳的功能？

在這一部分，實(shí)現(xiàn)相同的uploader，并為uploader添加一些新功能：

允許選擇多個(gè)文件
拖拽操作
現(xiàn)在給Uplodaer View添加新功能：

為輸入文件元素添加多個(gè)屬性，實(shí)現(xiàn)同時(shí)選擇多個(gè)文件。

添加實(shí)現(xiàn)拖拽功能的文件，如以下代碼所示：

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

在JS方法MultiplefileSelected中添加onChange事件，與之前SingleFileSelected的寫(xiě)法類(lèi)似，不同的是需要將所有的文件列出，并允許拖拽文件。代碼如下：

 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 = '<div id="File_' + i + '" 
            class="info"><div class="InfoContainer">' +
                    '<div class="Error">' + err + '</div>' +
                   '<div data-name="FileName" 
                   class="info">' + fileInfo.name + '</div>' +
                   '<div data-type="FileType" 
                   class="info">' + fileInfo.type + '</div>' +
                   '<div data-size="FileSize" 
                   class="info">' + fileInfo.size() + 
                   '</div></div><hr/></div>';
            $('#Files').append(RowInfo);
          }
          else {
            var image = '<img src="' + fileInfo.fileContent + 
            '" class="thumb" title="' + 
            fileInfo.name + '" />';
            var RowInfo = '<div id="File_' + i + '" 
            class="info"><div class="InfoContainer">' +
                   '<div data_img="Imagecontainer">' + 
                   image + '</div>' +
                   '<div data-name="FileName" 
                   class="info">' + fileInfo.name + '</div>' +
                   '<div data-type="FileType" 
                   class="info">' + fileInfo.type + '</div>' +
                   '<div data-size="FileSize" 
                   class="info">' + fileInfo.size() + 
                   '</div></div><hr/></div>';
            $('#Files').append(RowInfo);
          }
        });
      }
    }
  }

在該方法中，將選擇和拖拽文件操作的變量設(shè)置為全局變量selectedFiles，然后掃描 selectedfiles中的每個(gè)文件，將從 DataURLreader對(duì)象中調(diào)用Read 方法讀取文件。

DataURLreader對(duì)象可調(diào)用read方法，并將File對(duì)象和回調(diào)方法作為read方法參數(shù)，在上述方法中我們創(chuàng)建了FileReader，并修改了FileReader的Onload和onerror回調(diào)函數(shù)。調(diào)用 readAsDataURL 方法來(lái)讀文件。

新建FileInfo對(duì)象包括了所有的文件信息及內(nèi)容。

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

使用拖拽操作選擇

由于大部分瀏覽器現(xiàn)在已經(jīng)執(zhí)行拖拽操作，為了實(shí)現(xiàn)拖拽操作，在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);

當(dāng)文件拖到目標(biāo)位置時(shí)觸發(fā)dragover事件，在以下代碼中，我們修改了默認(rèn)瀏覽器及datatransfer的dropEffect 屬性，代碼如下：

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

接著在MultiplefileSelected中添加drop事件來(lái)處理文件drop操作。

大部分功能已經(jīng)完善，現(xiàn)在需要添加“上傳按鈕”，通過(guò)Onclick事件來(lái)調(diào)用UploadMultipleFiles方法。

該方法與上文提到的Uploadfile方法類(lèi)似，不同的是手動(dòng)驗(yàn)證formdata對(duì)象值。

   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('image.*')) {
         continue;
       }
      }
  // AJAX Request code here
  }

接下來(lái)添加服務(wù)器端處理代碼，與上文添加的代碼類(lèi)似，需要做的就是接受一系列的文件列表，如下：

public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)

確保 HttpPostedFileBase 數(shù)組名稱(chēng)與append 方法中的名稱(chēng)相同，只有這樣，MVC才能映射到文件數(shù)組中。

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=""/>

到這里所有的功能就可以實(shí)現(xiàn)了，而且最大可上傳2GB的文件。

以上內(nèi)容就是小編給大家介紹的MVC中基于Ajax和HTML5實(shí)現(xiàn)文件上傳功能，希望對(duì)大家有所幫助。

您可能感興趣的文章: