MVC5：使用Ajax和HTML5實現文件上傳功能

時間  2019-11-06
標籤 mvc5 mvc 使用 ajax html5 html 實現 文件 上傳 功能 欄目 Ajax 简体版
原文   原文鏈接

引言

在實際編程中，常常遇到實現文件上傳並顯示上傳進度的功能，基於此目的，本文就爲你們介紹不使用flash 或任何上傳文件的插件來實現帶有進度顯示的文件上傳功能。css

基本功能：實現帶有進度條的文件上傳功能html

高級功能：經過拖拽文件的操做實現多個文件上傳功能web

背景

HTML5提供了一種標準的訪問本地文件的方法——File API規格說明，經過調用File API 可以訪問文件信息，也能夠利用客戶端來驗證上傳文件的類型和大小是否規範。ajax

該規格說明包含如下幾個接口來使用文件：編程

File接口：具備文件的「讀權限」，能夠獲取文件名，類型，大小等。數組

FileList接口：指單獨選定的文件列表，能夠經過<input type="file">或拖拽呈如今用戶界面供用戶選擇。瀏覽器

XMLHTTPRequest2是HTML5的無名英雄，XHR2與XMLHttpRequest大致相同，但同時也添加了不少新功能，以下：服務器

1. 增長了上傳/下載二進制數據app

2. 增長了上傳過程當中Progess （進度條）事件，該事件包含多部分的信息：函數

  • Total：整型值，用於指定傳輸數據的總字節數。
  • Loaded：整型值，用於指定上傳的字節。
  • lengthComputable：Bool值用於檢測上傳文件大小是否可計算。

3. 跨資源共享請求

這些新特性都使得Ajax和HTML5很好的協做，讓文件上傳變得很是簡單，再也不須要使用Flash Player、外部插件或html的<form>標籤就能夠完成，根據服務器端就能夠顯示上傳進度條。

本文會編寫一個小型應用程序，可以實現如下功能：

  • 上傳單個文件，提供上傳進度信息顯示。
  • 將圖片發送到服務器時，建立圖像縮略圖。
  • 經過文件列表或拖拽操做實現多個文件上傳。

首先咱們須要檢驗瀏覽器是否支持XHR2,File API,FormData及拖拽操做。

編寫代碼

如何上傳單個文件並顯示上傳進度？

首先須要作的是建立簡單的View :

  • 定義一個表單，由輸入文件元素和提交按鈕組成。
  • 使用Bootstrap 進度條顯示進度。

 <div id=

在Onchange 事件中添加輸入文件元素，並在JS方法SingleFileSelected使用，所以在用戶選擇和修改文件時都會調用此方法。在該方法中，咱們將選擇輸入文件元素和訪問FileList的文件對象，選擇第一個文件files[0]，所以咱們能夠獲得文件名，文件類型等信息。

function singleFileSelected(evt) {
   2:      //var selectedFile = evt.target.files can use this  or select input file element 
   3:      //and access it's files object
    var selectedFile = ($())[0].files[0];
     (selectedFile) {
        var FileSize = 0;
        var imageType = /image.*/;
         (selectedFile.size > 1048576) {
            FileSize = Math.round(selectedFile.size * 100 / 1048576) / 100 + ;
        }
          (selectedFile.size > 1024) {
            FileSize = Math.round(selectedFile.size * 100 / 1024) / 100 + ;
        }
         {
            FileSize = selectedFile.size + ;
        }
  17:          // here we will add the code of thumbnail preview of upload images
  18:  
        $().text( + selectedFile.name);
        $().text( + selectedFile.type);
        $().text( + FileSize);
    }
}

能夠經過File reader對象從內存讀取上傳文件內容。reader 對象提供不少事件，onload,onError以及四種讀取數據的函數readAsBinaryString(), readAsText()，readAsArrayBuffer(), readAsDataURL(),result屬性表示文件內容。該屬性只有當讀操做執行完成後纔有效，數據格式根據調用的初始化讀操做制定的。

在這裏就不詳細解釋File reader，咱們會在SingleFileSelected 方法中使用，用於預覽圖像，查看代碼：

 (selectedFile.type.match(imageType)) {
           var reader =  FileReader();
           reader.onload = function (e) {
   4:  
               $().empty();
               var dataURL = reader.result;
               var img =  Image()
               img.src = dataURL;
               img.className = ;
               $().append(img);
           };
           reader.readAsDataURL(selectedFile);
       }


到如今爲止，就可看到下圖：

如今須要將已上傳的文件發送到服務器，所以添加Onclick事件，並在JS uploadFile()方法中調用，代碼以下：

function UploadFile() {
   2:      //we can create form by passing the form to Constructor of formData object
   3:      //or creating it manually using append function 
   4:      //but please note file name should be same like the action Parameter
   5:      //var dataString = new FormData();
   6:      //dataString.append("UploadedFile", selectedFile);
   7:  
    var form = $()[0];
    var dataString =  FormData(form);
    $.ajax({
        url: ,
        type: ,
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
             (myXhr.upload) {
  16:                  //myXhr.upload.onprogress = progressHandlingFunction
                myXhr.upload.addEventListener(, progressHandlingFunction,
                );
            }
             myXhr;
        },
  22:          //Ajax events
        success: successHandler,
        error: errorHandler,
        complete:completeHandler,
  26:          // Form data
        data: dataString,
  28:          //Options to tell jQuery not to process data or worry about content-type.
        cache: ,
        contentType: ,
        processData:
    });
}

在該方法中，發送表單，使用Form 數據對象來序列化文件值，咱們能夠手動建立formdata數據的實例化，經過調用append()方法將域值掛起，或是經過檢索HTML 表單的FormData對象。

progressHandlingFunction方法會提供檢驗上傳文件Size 是否可計算，使用e.loaded和e.total計算出已上傳百分之多少的數據。

function progressHandlingFunction(e) {
     (e.lengthComputable) {
        var percentComplete = Math.round(e.loaded * 100 / e.total);
        $().css(,
        percentComplete + ).attr(, percentComplete);
        $().text(percentComplete + );
    }
     {
        $().text();
    }
}

如今已經實現了基本的發送數據及提供進度條的功能，接下來須要實現服務器端的代碼處理，使用upload action方法和uplpader controller 。

在upload 方法中，能夠從HttpPostedfileBase對象中獲取文件信息，該對象包含上傳的文件的基本信息如Filename屬性，Contenttype屬性，inputStream屬性等內容，這些信息均可以用來驗證服務器端接收的文件是否有錯，也能夠用來保存文件。

[HttpPost]
   2:  
         JsonResult Upload(HttpPostedFileBase uploadedFile)
        {
             (uploadedFile !=  && uploadedFile.ContentLength > 0)
            {
                [] FileByteArray =  [uploadedFile.ContentLength];
                uploadedFile.InputStream.Read(FileByteArray, 0, uploadedFile.ContentLength);
                Attachment newAttchment =  Attachment();
                newAttchment.FileName = uploadedFile.FileName;
                newAttchment.FileType = uploadedFile.ContentType;
                newAttchment.FileContent = FileByteArray;
                OperationResult operationResult = attachmentManager.SaveAttachment(newAttchment);
                 (operationResult.Success)
                {
                     HTMLString = CaptureHelper.RenderViewToString
                    (, newAttchment, .ControllerContext);
                     Json(
                    {
                        statusCode = 200,
                        status = operationResult.Message,
                        NewRow = HTMLString
                    }, JsonRequestBehavior.AllowGet);
  24:  
                }
  26:                  else
                {
                     Json(
                    {
                        statusCode = 400,
                        status = operationResult.Message,
                        file = uploadedFile.FileName
                    }, JsonRequestBehavior.AllowGet);
  34:  
                }
            }
             Json(
            {
                statusCode = 400,
                status = ,
                file = .Empty
            }, JsonRequestBehavior.AllowGet);
        }

可否經過拖拽操做實現多個文件上傳的功能？

在這一部分，實現相同的uploader，併爲uploader添加一些新功能：

  • 容許選擇多個文件
  • 拖拽操做

如今給Uplodaer View添加新功能：

  • 爲輸入文件元素添加多個屬性，實現同時選擇多個文件。
  • 添加實現拖拽功能的文件，如如下代碼所示：
<div id=>Drop images Here</div>

在JS方法MultiplefileSelected中添加onChange事件，與以前SingleFileSelected的寫法相似，不一樣的是須要將全部的文件列出，並容許拖拽文件。代碼以下：

function MultiplefileSelected(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $().removeClass();
    selectedFiles = evt.target.files || evt.dataTransfer.files;
     (selectedFiles) {
        $().empty();
         (var i = 0; i < selectedFiles.length; i++) {
            DataURLFileReader.read(selectedFiles[i], function (err, fileInfo) {
                 (err != ) {
                    var RowInfo =  + i +
                    class="info"><div class="InfoContainer">' +
                                    + err +  +
  14:                                    '<div data-name="FileName" 
                                  class="info">' + fileInfo.name +  +
  16:                                    '<div data-type="FileType" 
                                  class="info">' + fileInfo.type +  +
  18:                                    '<div data-size="FileSize" 
                                  class="info">' + fileInfo.size() +
                                  ;
                    $().append(RowInfo);
                }
                 {
                    var image =  + fileInfo.fileContent +
                     +
                    fileInfo.name + ;
                    var RowInfo =  + i +
                    class="info"><div class="InfoContainer">' +
                                   +
                                  image +  +
  31:                                    '<div data-name="FileName" 
                                  class="info">' + fileInfo.name +  +
  33:                                    '<div data-type="FileType" 
                                  class="info">' + fileInfo.type +  +
  35:                                    '<div data-size="FileSize" 
                                  class="info">' + fileInfo.size() +
                                  ;
                    $().append(RowInfo);
                }
            });
        }
    }
}

在該方法中，將選擇和拖拽文件操做的變量設置爲全局變量selectedFiles，而後掃描 selectedfiles中的每一個文件，將從 DataURLreader對象中調用Read 方法讀取文件。

DataURLreader對象可調用read方法，並將File對象和回調方法做爲read方法參數，在上述方法中咱們建立了FileReader，並修改了FileReader的Onload和onerror回調函數。調用 readAsDataURL 方法來讀文件。

新建FileInfo對象包括了全部的文件信息及內容。

var DataURLFileReader = {
    read: function (file, callback) {
        var reader =  FileReader();
        var fileInfo = {
            name: file.name,
            type: file.type,
            fileContent: ,
            size: function () {
                var FileSize = 0;
                 (file.size > 1048576) {
                    FileSize = Math.round(file.size * 100 / 1048576) / 100 + ;
                }
                  (file.size > 1024) {
                    FileSize = Math.round(file.size * 100 / 1024) / 100 + ;
                }
                 {
                    FileSize = file.size + ;
                }
                 FileSize;
            }
        };
         (!file.type.match()) {
            callback(, fileInfo);
            ;
        }
        reader.onload = function () {
            fileInfo.fileContent = reader.result;
            callback(, fileInfo);
        };
        reader.onerror = function () {
            callback(reader.error, fileInfo);
        };
        reader.readAsDataURL(file);
    }
};

使用拖拽操做選擇

因爲大部分瀏覽器如今已經執行拖拽操做，爲了實現拖拽操做，在drop_zone 元素中添加dragover和drop事件。

var dropZone = document.getElementById();
    dropZone.addEventListener(, handleDragOver, );
    dropZone.addEventListener(, MultiplefileSelected, );
    dropZone.addEventListener(, dragenterHandler, );
    dropZone.addEventListener(, dragleaveHandler, );

當文件拖到目標位置時觸發dragover事件，在如下代碼中，咱們修改了默認瀏覽器及datatransfer的dropEffect 屬性，代碼以下：

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

接着在MultiplefileSelected中添加drop事件來處理文件drop操做。

大部分功能已經完善，如今須要添加「上傳按鈕」，經過Onclick事件來調用UploadMultipleFiles方法。

該方法與上文提到的Uploadfile方法相似，不一樣的是手動驗證formdata對象值。

function UploadMultipleFiles() {
   2:  
   3:      // here we will create FormData manually to prevent sending mon image files
    var dataString =  FormData();
   5:      //var files = document.getElementById("UploadedFiles").files;
     (var i = 0; i < selectedFiles.length; i++) {
         (!selectedFiles[i].type.match()) {
            ;
        }
       }
  11:  // AJAX Request code here
}

接下來添加服務器端處理代碼，與上文添加的代碼相似，須要作的就是接受一系列的文件列表，以下：

 JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)

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

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

上傳大文件

爲了容許上傳大文件，若是使用的是 IIS7及以上版本，須要修改Web.config 文件，添加如下代碼：

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

到這裏全部的功能就能夠實現了，並且最大可上傳2GB的文件。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程