请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-10-24 09:57  /   查看:8295  /  回复:0
本帖最后由 断天涯大虾 于 2016-10-24 10:15 编辑

引言
在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用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 进度条显示进度。
  1.    1:  <div id="FormContent">
  2.    2:             <form id="FormUpload"
  3.    3:             enctype="multipart/form-data" method="post">
  4.    4:                 <span class="btn btn-success fileinput-button">
  5.    5:                     <i class="glyphicon glyphicon-plus"></i>
  6.    6:                     <span>Add files...</span>
  7.    7:                     <input type="file"
  8.    8:                     name="UploadedFile" id="UploadedFile" />
  9.    9:                 </span>
  10.   10:                 <button class="btn btn-primary start"
  11.   11:                 type="button" id="Submit_btn">
  12.   12:                     <i class="glyphicon glyphicon-upload"></i>
  13.   13:                     <span>Start upload</span>
  14.   14:                 </button>
  15.   15:                  <button class="btn btn-warning cancel"
  16.   16:                  type="button" id="Cancel_btn">
  17.   17:                     <i class="glyphicon glyphicon-ban-circle"></i>
  18.   18:                     <span>close</span>
  19.   19:                 </button>
  20.   20:             </form>
  21.   21:             <div class="progress CustomProgress">
  22.   22:                 <div id="FileProgress"
  23.   23:                 class="progress-bar" role="progressbar"
  24.   24:         aria-valuenow="0" aria-valuemin="0"
  25.   25:         aria-valuemax="100" style="width: 0%;">
  26.   26:                     <span></span>
  27.   27:                 </div>
  28.   28:             </div>
  29.   29:             <div class="InfoContainer">
  30.   30:                 <div id="Imagecontainer"></div>
  31.   31:                 <div id="FileName" class="info">
  32.   32:                 </div>
  33.   33:                 <div id="FileType" class="info">
  34.   34:                 </div>
  35.   35:                 <div id="FileSize" class="info">
  36.   36:                 </div>
  37.   37:             </div>
  38.   38:         </div>
复制代码
在Onchange 事件中添加输入文件元素,并在JS方法SingleFileSelected使用,因此在用户选择和修改文件时都会调用此方法。在该方法中,我们将选择输入文件元素和访问FileList的文件对象,选择第一个文件files[0],因此我们可以得到文件名,文件类型等信息。
  1.    1:  function singleFileSelected(evt) {
  2.    2:      //var selectedFile = evt.target.files can use this  or select input file element
  3.    3:      //and access it's files object
  4.    4:      var selectedFile = ($("#UploadedFile"))[0].files[0];//FileControl.files[0];
  5.    5:      if (selectedFile) {
  6.    6:          var FileSize = 0;
  7.    7:          var imageType = /image.*/;
  8.    8:          if (selectedFile.size > 1048576) {
  9.    9:              FileSize = Math.round(selectedFile.size * 100 / 1048576) / 100 + " MB";
  10.   10:          }
  11.   11:          else if (selectedFile.size > 1024) {
  12.   12:              FileSize = Math.round(selectedFile.size * 100 / 1024) / 100 + " KB";
  13.   13:          }
  14.   14:          else {
  15.   15:              FileSize = selectedFile.size + " Bytes";
  16.   16:          }
  17.   17:          // here we will add the code of thumbnail preview of upload images
  18.   18:         
  19.   19:          $("#FileName").text("Name : " + selectedFile.name);
  20.   20:          $("#FileType").text("type : " + selectedFile.type);
  21.   21:          $("#FileSize").text("Size : " + FileSize);
  22.   22:      }
  23.   23:  }
复制代码
可以通过File reader对象从内存读取上传文件内容。reader 对象提供很多事件,onload,onError以及四种读取数据的函数readAsBinaryString(), readAsText(),readAsArrayBuffer(), readAsDataURL(),result属性表示文件内容。该属性只有当读操作执行完成后才有效,数据格式根据调用的初始化读操作制定的。
在这里就不详细解释File reader,我们会在SingleFileSelected 方法中使用,用于预览图像,查看代码:
  1.    1:  if (selectedFile.type.match(imageType)) {
  2.    2:             var reader = new FileReader();
  3.    3:             reader.onload = function (e) {
  4.    4:   
  5.    5:                 $("#Imagecontainer").empty();
  6.    6:                 var dataURL = reader.result;
  7.    7:                 var img = new Image()
  8.    8:                 img.src = dataURL;
  9.    9:                 img.className = "thumb";
  10.   10:                 $("#Imagecontainer").append(img);
  11.   11:             };
  12.   12:             reader.readAsDataURL(selectedFile);
  13.   13:         }
复制代码
到现在为止,就可看到下图:
PenguinsFile.png
现在需要将已上传的文件发送到服务器,因此添加Onclick事件,并在JS uploadFile()方法中调用,代码如下:
  1.    1:  function UploadFile() {
  2.    2:      //we can create form by passing the form to Constructor of formData object
  3.    3:      //or creating it manually using append function
  4.    4:      //but please note file name should be same like the action Parameter
  5.    5:      //var dataString = new FormData();
  6.    6:      //dataString.append("UploadedFile", selectedFile);
  7.    7:   
  8.    8:      var form = $('#FormUpload')[0];
  9.    9:      var dataString = new FormData(form);
  10.   10:      $.ajax({
  11.   11:          url: '/Uploader/Upload',  //Server script to process data
  12.   12:          type: 'POST',
  13.   13:          xhr: function () {  // Custom XMLHttpRequest
  14.   14:              var myXhr = $.ajaxSettings.xhr();
  15.   15:              if (myXhr.upload) { // Check if upload property exists
  16.   16:                  //myXhr.upload.onprogress = progressHandlingFunction
  17.   17:                  myXhr.upload.addEventListener('progress', progressHandlingFunction,
  18.   18:                  false); // For handling the progress of the upload
  19.   19:              }
  20.   20:              return myXhr;
  21.   21:          },
  22.   22:          //Ajax events
  23.   23:          success: successHandler,
  24.   24:          error: errorHandler,
  25.   25:          complete:completeHandler,
  26.   26:          // Form data
  27.   27:          data: dataString,
  28.   28:          //Options to tell jQuery not to process data or worry about content-type.
  29.   29:          cache: false,
  30.   30:          contentType: false,
  31.   31:          processData: false
  32.   32:      });
  33.   33:  }
复制代码
在该方法中,发送表单,使用Form 数据对象来序列化文件值,我们可以手动创建formdata数据的实例化,通过调用append()方法将域值挂起,或是通过检索HTML 表单的FormData对象。
progressHandlingFunction方法会提供检验上传文件Size 是否可计算,使用e.loaded和e.total计算出已上传百分之多少的数据。
  1.    1:  function progressHandlingFunction(e) {
  2.    2:      if (e.lengthComputable) {
  3.    3:          var percentComplete = Math.round(e.loaded * 100 / e.total);
  4.    4:          $("#FileProgress").css("width",
  5.    5:          percentComplete + '%').attr('aria-valuenow', percentComplete);
  6.    6:          $('#FileProgress span').text(percentComplete + "%");
  7.    7:      }
  8.    8:      else {
  9.    9:          $('#FileProgress span').text('unable to compute');
  10.   10:      }
  11.   11:  }
复制代码
现在已经实现了基本的发送数据及提供进度条的功能,接下来需要实现服务器端的代码处理,使用upload action方法和uplpader controller 。
在upload 方法中,可以从HttpPostedfileBase对象中获取文件信息,该对象包含上传的文件的基本信息如Filename属性,Contenttype属性,inputStream属性等内容,这些信息都可以用来验证服务器端接收的文件是否有错,也可以用来保存文件。
  1.    1:  [HttpPost]
  2.    2:   
  3.    3:          public JsonResult Upload(HttpPostedFileBase uploadedFile)
  4.    4:          {
  5.    5:              if (uploadedFile != null && uploadedFile.ContentLength > 0)
  6.    6:              {
  7.    7:                  byte[] FileByteArray = new byte[uploadedFile.ContentLength];
  8.    8:                  uploadedFile.InputStream.Read(FileByteArray, 0, uploadedFile.ContentLength);
  9.    9:                  Attachment newAttchment = new Attachment();
  10.   10:                  newAttchment.FileName = uploadedFile.FileName;
  11.   11:                  newAttchment.FileType = uploadedFile.ContentType;
  12.   12:                  newAttchment.FileContent = FileByteArray;
  13.   13:                  OperationResult operationResult = attachmentManager.SaveAttachment(newAttchment);
  14.   14:                  if (operationResult.Success)
  15.   15:                  {
  16.   16:                      string HTMLString = CaptureHelper.RenderViewToString
  17.   17:                      ("_AttachmentItem", newAttchment, this.ControllerContext);
  18.   18:                      return Json(new
  19.   19:                      {
  20.   20:                          statusCode = 200,
  21.   21:                          status = operationResult.Message,
  22.   22:                          NewRow = HTMLString
  23.   23:                      }, JsonRequestBehavior.AllowGet);
  24.   24:   
  25.   25:                  }
  26.   26:                  else
  27.   27:                  {
  28.   28:                      return Json(new
  29.   29:                      {
  30.   30:                          statusCode = 400,
  31.   31:                          status = operationResult.Message,
  32.   32:                          file = uploadedFile.FileName
  33.   33:                      }, JsonRequestBehavior.AllowGet);
  34.   34:   
  35.   35:                  }
  36.   36:              }
  37.   37:              return Json(new
  38.   38:              {
  39.   39:                  statusCode = 400,
  40.   40:                  status = "Bad Request! Upload Failed",
  41.   41:                  file = string.Empty
  42.   42:              }, JsonRequestBehavior.AllowGet);
  43.   43:          }
复制代码

能否通过拖拽操作实现多个文件上传的功能?
在这一部分,实现相同的uploader,并为uploader添加一些新功能:
  • 允许选择多个文件
  • 拖拽操作

现在给Uplodaer View添加新功能:
  • 为输入文件元素添加多个属性,实现同时选择多个文件。
  • 添加实现拖拽功能的文件,如以下代码所示:

  1. <div id="drop_zone">Drop images Here</div>
复制代码
在JS方法MultiplefileSelected中添加onChange事件,与之前SingleFileSelected的写法类似,不同的是需要将所有的文件列出,并允许拖拽文件。代码如下:
  1.    1:  function MultiplefileSelected(evt) {
  2.    2:      evt.stopPropagation();
  3.    3:      evt.preventDefault();
  4.    4:      $('#drop_zone').removeClass('hover');
  5.    5:      selectedFiles = evt.target.files || evt.dataTransfer.files;
  6.    6:      if (selectedFiles) {
  7.    7:          $('#Files').empty();
  8.    8:          for (var i = 0; i < selectedFiles.length; i++) {
  9.    9:              DataURLFileReader.read(selectedFiles[i], function (err, fileInfo) {
  10.   10:                  if (err != null) {
  11.   11:                      var RowInfo = '<div id="File_' + i + '"
  12.   12:                      class="info"><div class="InfoContainer">' +
  13.   13:                                     '<div class="Error">' + err + '</div>' +
  14.   14:                                    '<div data-name="FileName"
  15.   15:                                    class="info">' + fileInfo.name + '</div>' +
  16.   16:                                    '<div data-type="FileType"
  17.   17:                                    class="info">' + fileInfo.type + '</div>' +
  18.   18:                                    '<div data-size="FileSize"
  19.   19:                                    class="info">' + fileInfo.size() +
  20.   20:                                    '</div></div><hr/></div>';
  21.   21:                      $('#Files').append(RowInfo);
  22.   22:                  }
  23.   23:                  else {
  24.   24:                      var image = '<img src="' + fileInfo.fileContent +
  25.   25:                      '" class="thumb" title="' +
  26.   26:                      fileInfo.name + '" />';
  27.   27:                      var RowInfo = '<div id="File_' + i + '"
  28.   28:                      class="info"><div class="InfoContainer">' +
  29.   29:                                    '<div data_img="Imagecontainer">' +
  30.   30:                                    image + '</div>' +
  31.   31:                                    '<div data-name="FileName"
  32.   32:                                    class="info">' + fileInfo.name + '</div>' +
  33.   33:                                    '<div data-type="FileType"
  34.   34:                                    class="info">' + fileInfo.type + '</div>' +
  35.   35:                                    '<div data-size="FileSize"
  36.   36:                                    class="info">' + fileInfo.size() +
  37.   37:                                    '</div></div><hr/></div>';
  38.   38:                      $('#Files').append(RowInfo);
  39.   39:                  }
  40.   40:              });
  41.   41:          }
  42.   42:      }
  43.   43:  }
复制代码
在该方法中,将选择和拖拽文件操作的变量设置为全局变量selectedFiles,然后扫描 selectedfiles中的每个文件,将从 DataURLreader对象中调用Read 方法读取文件。
DataURLreader对象可调用read方法,并将File对象和回调方法作为read方法参数,在上述方法中我们创建了FileReader,并修改了FileReader的Onload和onerror回调函数。调用 readAsDataURL 方法来读文件。
新建FileInfo对象包括了所有的文件信息及内容。
  1.    1:  var DataURLFileReader = {
  2.    2:      read: function (file, callback) {
  3.    3:          var reader = new FileReader();
  4.    4:          var fileInfo = {
  5.    5:              name: file.name,
  6.    6:              type: file.type,
  7.    7:              fileContent: null,
  8.    8:              size: function () {
  9.    9:                  var FileSize = 0;
  10.   10:                  if (file.size > 1048576) {
  11.   11:                      FileSize = Math.round(file.size * 100 / 1048576) / 100 + " MB";
  12.   12:                  }
  13.   13:                  else if (file.size > 1024) {
  14.   14:                      FileSize = Math.round(file.size * 100 / 1024) / 100 + " KB";
  15.   15:                  }
  16.   16:                  else {
  17.   17:                      FileSize = file.size + " bytes";
  18.   18:                  }
  19.   19:                  return FileSize;
  20.   20:              }
  21.   21:          };
  22.   22:          if (!file.type.match('image.*')) {
  23.   23:              callback("file type not allowed", fileInfo);
  24.   24:              return;
  25.   25:          }
  26.   26:          reader.onload = function () {
  27.   27:              fileInfo.fileContent = reader.result;
  28.   28:              callback(null, fileInfo);
  29.   29:          };
  30.   30:          reader.onerror = function () {
  31.   31:              callback(reader.error, fileInfo);
  32.   32:          };
  33.   33:          reader.readAsDataURL(file);
  34.   34:      }
  35.   35:  };
复制代码

使用拖拽操作选择
由于大部分浏览器现在已经执行拖拽操作,为了实现拖拽操作,在drop_zone 元素中添加dragover和drop事件。
  1.    1:  var dropZone = document.getElementById('drop_zone');
  2.    2:      dropZone.addEventListener('dragover', handleDragOver, false);
  3.    3:      dropZone.addEventListener('drop', MultiplefileSelected, false);
  4.    4:      dropZone.addEventListener('dragenter', dragenterHandler, false);
  5.    5:      dropZone.addEventListener('dragleave', dragleaveHandler, false);
复制代码

当文件拖到目标位置时触发dragover事件,在以下代码中,我们修改了默认浏览器及datatransfer的dropEffect 属性,代码如下:
  1.    1:  function handleDragOver(evt) {
  2.    2:      evt.preventDefault();
  3.    3:      evt.dataTransfer.effectAllowed = 'copy';
  4.    4:      evt.dataTransfer.dropEffect = 'copy';
  5.    5:  }
复制代码

接着在MultiplefileSelected中添加drop事件来处理文件drop操作。
大部分功能已经完善,现在需要添加“上传按钮”,通过Onclick事件来调用UploadMultipleFiles方法。
该方法与上文提到的Uploadfile方法类似,不同的是手动验证formdata对象值。
  1.    1:  function UploadMultipleFiles() {
  2.    2:   
  3.    3:      // here we will create FormData manually to prevent sending mon image files
  4.    4:      var dataString = new FormData();
  5.    5:      //var files = document.getElementById("UploadedFiles").files;
  6.    6:      for (var i = 0; i < selectedFiles.length; i++) {
  7.    7:          if (!selectedFiles[i].type.match('image.*')) {
  8.    8:              continue;
  9.    9:          }
  10.   10:         }
  11.   11:  // AJAX Request code here
  12.   12:  }
复制代码

接下来添加服务器端处理代码,与上文添加的代码类似,需要做的就是接受一系列的文件列表,如下:
  1. public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)
复制代码
确保 HttpPostedFileBase 数组名称与append 方法中的名称相同,只有这样,MVC才能映射到文件数组中。
  1. public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)
  2. dataString.append("uploadedFiles", selectedFiles);
复制代码

上传大文件
为了允许上传大文件,如果使用的是 IIS7及以上版本,需要修改Web.config 文件,添加以下代码:
  1.    1:  <system.webServer>
  2.    2:         <security>
  3.    3:                  <requestFiltering>
  4.    4:                             <requestLimits maxAllowedContentLength="2147483648" />
  5.    5:                  </requestFiltering>
  6.    6:         </security>
  7.    7:  </system.webServer>
  8.    8:   
  9.    9:  <httpRuntime targetFramework="4.5"  maxRequestLength="2097152"/>
复制代码

到这里所有的功能就可以实现了,而且最大可上传2GB的文件。在MVC开发中,文件的上传和下载都是最常需要实现的功能。在开发时,还可以借助一下工具来更好的实现这样的功能。ComponentOne Studio ASP.NET MVC 这款轻量级控件,它与Visual Studio无缝集成,完全与MVC6和ASP.NET 5.0兼容,将大幅提高工作效率。
   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部