MVC5：使用Ajax和HTML5实现文件上传功能

引言

在实际编程中，常常遇到实现文件上传并显示上传进度的功能，基于此目的，本文就为你们介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。

基本功能：实现带有进度条的文件上传功能

高级功能：经过拖拽文件的操做实现多个文件上传功能

背景

HTML5提供了一种标准的访问本地文件的方法——File API规格说明，经过调用File API 可以访问文件信息，也能够利用客户端来验证上传文件的类型和大小是否规范。

该规格说明包含如下几个接口来使用文件：

File接口：具备文件的“读权限”，能够获取文件名，类型，大小等。

FileList接口：指单独选定的文件列表，能够经过<input type="file">或拖拽呈如今用户界面供用户选择。

XMLHTTPRequest2是HTML5的无名英雄，XHR2与XMLHttpRequest大致相同，但同时也添加了不少新功能，以下：

1. 增长了上传/下载二进制数据

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的文件。