文档章节

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

柠檬酷
 柠檬酷
发布于 2015/11/23 14:48
字数 2185
阅读 90
收藏 6
点赞 0
评论 0

引言

在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用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的文件。

本文转载自:http://www.cnblogs.com/powertoolsteam/p/4832337.html

共有 人打赏支持
柠檬酷
粉丝 4
博文 67
码字总数 3040
作品 0
西安
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
0
0
7款基于JavaScript和AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助。 1. jQuery File U...

EDIAGD
2013/09/23
0
0
Nodejs express、html5实现拖拽上传

Nodejs express、html5实现拖拽上传 一、前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传。给用户体验带来很大问题...

james_laughing
2015/06/02
0
0
使用HTML5构建下一代的Web Form

作者 蒋博 发布于 2009年6月22日 上午4时52分 HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 发起的,最开始的名称叫做Web Application 1.0,而后这个标准吸纳了...

晨曦之光
2012/03/09
0
0
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
0
0
利用HTML5分片上传超大文件

在网页中直接上传大文件一直是个比较头疼的问题,主要面临的问题一般包括两类:一是上传时间长中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主...

miscellanea
2014/09/22
0
0
初识html5 File API实现带有进度提示的文件上传

Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipart/form-data,但是需要修改服务器...

miscellanea
2014/06/27
0
3
分享一个HTML5的上传jQuery插件 - jQuery HTML5 uploader

随着HTML5的使用越来越被大家接受,基于HTML5的技术和插件也会变得越来越广泛,今天我们介绍一款基于HTML5和jQuery的上传插件: jQuery HTML5 uploader。 使用这个插件将会使得文件上传变得简...

gbin1
2011/11/19
0
0
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

日期:2011/11/19 来源:GBin1.com 昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader ,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式...

gbin1
2011/11/19
0
1
JS原生系列-DOM篇(延伸)

关于DOM,这就是最后一部分了,这部分都是后台或者最新的dom api,学的时候需要多的记忆一次,有印象有保障! -.ajax的介绍:ajax输出json格式文件 jsonp的介绍 xhr2的介绍 http://www.w3sch...

透笔度
2015/08/10
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
2
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
1
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
1
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
3
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
1
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
1
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部