Rumah > hujung hadapan web > tutorial js > MVC中基于Ajax和HTML5实现文件上传功能

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

亚连
Lepaskan: 2018-05-24 16:27:44
asal
2393 orang telah melayarinya

这篇文章主要介绍了MVC中基于Ajax和HTML5实现文件上传功能的相关资料,需要的朋友可以参考下

引言

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

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

高级功能:通过拖拽文件的操作实现多个文件上传功能

背景

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

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

File接口:具有文件的“读权限”,可以获取文件名,类型,大小等。

FileList接口:指单独选定的文件列表,可以通过或拖拽呈现在用户界面供用户选择。

XMLHTTPRequest2是HTML5的无名英雄,XHR2与XMLHttpRequest大体相同,但同时也添加了很多新功能,如下:

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

2. 增加了上传过程中Progess (进度条)事件,该事件包含多部分的信息:

Total:整型值,用于指定传输数据的总字节数。
Loaded:整型值,用于指定上传的字节。
lengthComputable:Bool值用于检测上传文件大小是否可计算。

3. 跨资源共享请求

这些新特性都使得Ajax和HTML5很好的协作,让文件上传变得非常简单,不再需要使用Flash Player、外部插件或html的

标签就可以完成,根据服务器端就可以显示上传进度条。

本文会编写一个小型应用程序,能够实现以下功能:

上传单个文件,提供上传进度信息显示。
将图片发送到服务器时,创建图像缩略图。
通过文件列表或拖拽操作实现多个文件上传。
首先我们需要检验浏览器是否支持XHR2,File API,FormData及拖拽操作。

编写代码

如何上传单个文件并显示上传进度?

首先需要做的是创建简单的View :

定义一个表单,由输入文件元素和提交按钮组成。

使用Bootstrap 进度条显示进度。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<p 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>

        <p class="progress CustomProgress">

          <p id="FileProgress"

          class="progress-bar" role="progressbar"

      aria-valuenow="" aria-valuemin=""

      aria-valuemax="" style="width %;">

            <span></span>

          </p>

        </p>

        <p class="InfoContainer">

          <p id="Imagecontainer"></p>

          <p id="FileName" class="info">

          </p>

          <p id="FileType" class="info">

          </p>

          <p id="FileSize" class="info">

          </p>

        </p>

      </p>

Salin selepas log masuk

在Onchange 事件中添加输入文件元素,并在JS方法SingleFileSelected使用,因此在用户选择和修改文件时都会调用此方法。在该方法中,我们将选择输入文件元素和访问FileList的文件对象,选择第一个文件files[0],因此我们可以得到文件名,文件类型等信息。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

function singleFileSelected(evt) {

    //var selectedFile = evt.target.files can use this or select input file element

    //and access it&#39;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);

   }

 }

Salin selepas log masuk

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

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

1

2

3

4

5

6

7

8

9

10

11

12

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

     }

Salin selepas log masuk

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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 = $(&#39;#FormUpload&#39;)[];

     var dataString = new FormData(form);

    $.ajax({

      url &#39;/Uploader/Upload&#39;, //Server script to process data

      type &#39;POST&#39;,

      xhr function () { // Custom XMLHttpRequest

        var myXhr = $.ajaxSettings.xhr();

        if (myXhr.upload) { // Check if upload property exists

          //myXhr.upload.onprogress = progressHandlingFunction

          myXhr.upload.addEventListener(&#39;progress&#39;, 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

    });

  }

Salin selepas log masuk

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

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

1

2

3

4

5

6

7

8

9

10

11

function progressHandlingFunction(e) {

     if (e.lengthComputable) {

       var percentComplete = Math.round(e.loaded * / e.total);

       $("#FileProgress").css("width",

       percentComplete + &#39;%&#39;).attr(&#39;aria-valuenow&#39;, percentComplete);

       $(&#39;#FileProgress span&#39;).text(percentComplete + "%");

     }

     else {

       $(&#39;#FileProgress span&#39;).text(&#39;unable to compute&#39;);

    }

  }

Salin selepas log masuk

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

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

     }

Salin selepas log masuk

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

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

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

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

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

1

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

Salin selepas log masuk

在JS方法MultiplefileSelected中添加onChange事件,与之前SingleFileSelected的写法类似,不同的是需要将所有的文件列出,并允许拖拽文件。代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

function MultiplefileSelected(evt) {

    evt.stopPropagation();

    evt.preventDefault();

    $(&#39;#drop_zone&#39;).removeClass(&#39;hover&#39;);

    selectedFiles = evt.target.files || evt.dataTransfer.files;

    if (selectedFiles) {

      $(&#39;#Files&#39;).empty();

      for (var i = ; i < selectedFiles.length; i++) {

        DataURLFileReader.read(selectedFiles[i], function (err, fileInfo) {

         if (err != null) {

           var RowInfo = &#39;<p id="File_&#39; + i + &#39;"

           class="info"><p class="InfoContainer">&#39; +

                   &#39;<p class="Error">&#39; + err + &#39;</p>&#39; +

                  &#39;<p data-name="FileName"

                  class="info">&#39; + fileInfo.name + &#39;</p>&#39; +

                  &#39;<p data-type="FileType"

                  class="info">&#39; + fileInfo.type + &#39;</p>&#39; +

                  &#39;<p data-size="FileSize"

                  class="info">&#39; + fileInfo.size() +

                  &#39;</p></p><hr/></p>&#39;;

           $(&#39;#Files&#39;).append(RowInfo);

         }

         else {

           var image = &#39;<img src="&#39; + fileInfo.fileContent +

           &#39;" class="thumb" title="&#39; +

           fileInfo.name + &#39;" />&#39;;

           var RowInfo = &#39;<p id="File_&#39; + i + &#39;"

           class="info"><p class="InfoContainer">&#39; +

                  &#39;<p data_img="Imagecontainer">&#39; +

                  image + &#39;</p>&#39; +

                  &#39;<p data-name="FileName"

                  class="info">&#39; + fileInfo.name + &#39;</p>&#39; +

                  &#39;<p data-type="FileType"

                  class="info">&#39; + fileInfo.type + &#39;</p>&#39; +

                  &#39;<p data-size="FileSize"

                  class="info">&#39; + fileInfo.size() +

                  &#39;</p></p><hr/></p>&#39;;

           $(&#39;#Files&#39;).append(RowInfo);

         }

       });

     }

   }

 }

Salin selepas log masuk

在该方法中,将选择和拖拽文件操作的变量设置为全局变量selectedFiles,然后扫描 selectedfiles中的每个文件,将从 DataURLreader对象中调用Read 方法读取文件。

DataURLreader对象可调用read方法,并将File对象和回调方法作为read方法参数,在上述方法中我们创建了FileReader,并修改了FileReader的Onload和onerror回调函数。调用 readAsDataURL 方法来读文件。

新建FileInfo对象包括了所有的文件信息及内容。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

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(&#39;image.*&#39;)) {

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

   }

 };

Salin selepas log masuk

使用拖拽操作选择

由于大部分浏览器现在已经执行拖拽操作,为了实现拖拽操作,在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 属性,代码如下:

1

2

3

4

5

function handleDragOver(evt) {

   evt.preventDefault();

   evt.dataTransfer.effectAllowed = &#39;copy&#39;;

   evt.dataTransfer.dropEffect = &#39;copy&#39;;

 }

Salin selepas log masuk

接着在MultiplefileSelected中添加drop事件来处理文件drop操作。

大部分功能已经完善,现在需要添加“上传按钮”,通过Onclick事件来调用UploadMultipleFiles方法。

该方法与上文提到的Uploadfile方法类似,不同的是手动验证formdata对象值。

1

2

3

4

5

6

7

8

9

10

11

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(&#39;image.*&#39;)) {

       continue;

     }

    }

// AJAX Request code here

}

Salin selepas log masuk

接下来添加服务器端处理代码,与上文添加的代码类似,需要做的就是接受一系列的文件列表,如下:

public JsonResult UplodMultiple(HttpPostedFileBase[] uploadedFiles)

确保 HttpPostedFileBase 数组名称与append 方法中的名称相同,只有这样,MVC才能映射到文件数组中。

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

上传大文件

为了允许上传大文件,如果使用的是 IIS7及以上版本,需要修改Web.config 文件,添加以下代码:

1

2

3

4

5

6

7

8

<system.webServer>

      <security>

           <requestFiltering>

                <requestLimits maxAllowedContentLength="" />

           </requestFiltering>

      </security>

   </system.webServer>

   <httpRuntime targetFramework="." maxRequestLength=""/>

Salin selepas log masuk

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

初步了解JavaScript,Ajax,jQuery,并比较三者关系

jquery与php结合实现AJAX长轮询

js ajax加载时的进度条代码

Atas ialah kandungan terperinci MVC中基于Ajax和HTML5实现文件上传功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Perbezaan antara HTML dan HTML5
daripada 1970-01-01 08:00:00
0
0
0
pengesahan html5 untuk symfony 2.1
daripada 1970-01-01 08:00:00
0
0
0
Berkenaan penggunaan html5
daripada 1970-01-01 08:00:00
0
0
0
html5 tunjukkan sorok
daripada 1970-01-01 08:00:00
0
0
0
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan