欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

MVC中基于Ajax和HTML5实现文件上传功能

程序员文章站 2022-06-03 15:08:14
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。 基本...

引言

在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用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="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使用,因此在用户选择和修改文件时都会调用此方法。在该方法中,我们将选择输入文件元素和访问filelist的文件对象,选择第一个文件files[0],因此我们可以得到文件名,文件类型等信息。

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

可以通过file reader对象从内存读取上传文件内容。reader 对象提供很多事件,onload,onerror以及四种读取数据的函数readasbinarystring(), readastext(),readasarraybuffer(), readasdataurl(),result属性表示文件内容。该属性只有当读操作执行完成后才有效,数据格式根据调用的初始化读操作制定的。

在这里就不详细解释file reader,我们会在singlefileselected 方法中使用,用于预览图像,查看代码:

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

到现在为止,就可看到下图:

MVC中基于Ajax和HTML5实现文件上传功能

现在需要将已上传的文件发送到服务器,因此添加onclick事件,并在js uploadfile()方法中调用,代码如下:

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

在该方法中,发送表单,使用form 数据对象来序列化文件值,我们可以手动创建formdata数据的实例化,通过调用append()方法将域值挂起,或是通过检索html 表单的formdata对象。

progresshandlingfunction方法会提供检验上传文件size 是否可计算,使用e.loaded和e.total计算出已上传百分之多少的数据。

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

现在已经实现了基本的发送数据及提供进度条的功能,接下来需要实现服务器端的代码处理,使用upload action方法和uplpader controller 。

在upload 方法中,可以从httppostedfilebase对象中获取文件信息,该对象包含上传的文件的基本信息如filename属性,contenttype属性,inputstream属性等内容,这些信息都可以用来验证服务器端接收的文件是否有错,也可以用来保存文件。        

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

 能否通过拖拽操作实现多个文件上传的功能?

在这一部分,实现相同的uploader,并为uploader添加一些新功能:

允许选择多个文件
拖拽操作
现在给uplodaer view添加新功能:

为输入文件元素添加多个属性,实现同时选择多个文件。

添加实现拖拽功能的文件,如以下代码所示:

 <div id="drop_zone">drop images here</div>

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

在该方法中,将选择和拖拽文件操作的变量设置为全局变量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('image.*')) {
         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=""/>

到这里所有的功能就可以实现了,而且最大可上传2gb的文件。

以上内容就是小编给大家介绍的mvc中基于ajax和html5实现文件上传功能,希望对大家有所帮助。