MVC中基于ajax和HTML5的文件上传功能

介绍

在实际的编程中，经常会遇到上传文件和显示上传进度的功能。基于这一目的，本文介绍了在不使用Flash或任何插件文件的情况下上传具有进度显示的文件。

基本功能：用进度条实现文件上传

高级功能：可以通过拖放文件实现多个文件上传

背景

HTML5提供了一种访问本地文件的标准方法——文件API规范，它可以通过调用文件API来访问文件信息，或者使用客户端来验证上传文件的类型和大小是否标准化。

规范包含以下接口来使用该文件：

文件接口：使用文件读取权限，可以获得文件名、类型、大小等。

文件列表界面：列表中选定的文件，可以单独提交或拖在用户选择的用户界面。

xmlhttprequest2是HTML5的一个匿名的英雄。xhr2是XMLHttpRequest对象相同，但它也增加了很多新功能，如下：

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

2。increased the Progess (progress bar) event in the upload process, which contains a lot of information:

总计：一个整数值，指定数据传输的总字节数。

加载：用于指定上传字节的整数值。

的lengthcomputable：布尔值用于检测是否对上传文件的大小是可计算的。

三.跨资源共享请求

这些新特性使得Ajax和HTML5很好地结合在一起，使得文件上传非常简单，不再需要使用Flash播放器、外部插件或HTML标记来完成，根据服务器端，您可以显示上传进度条。

本文将编写一个小应用程序，它可以实现以下功能：

上传一个文件以提供上传进度信息显示。

当图片发送到服务器时，会创建图像缩略图。

通过文件列表或拖放操作上传多个文件。

首先，我们需要检查浏览器是否支持xhr2，文件的API，表单，和拖放操作。

写代码

如何上传单个文件并显示上传进度
首先要做的是创建一个简单的视图：

定义一个表单，由输入文件元素和提交按钮组成。
使用引导进度条显示进度。
<表ID =formupload
enctype =多部分/表单数据method=后>
添加文件…
<输入类型文件
名称=uploadedFileid=uploadedFile />

<按钮类=按钮按钮小学开始
Type= button id= Submit_btn >

开始上传

<按钮类=按钮按钮警告取消
类型=按钮id=cancel_btn>

关闭
class=进度条的作用=进度条
咏叹调valuenow = 咏叹调valuemin =
咏叹调三锐= style=宽度%；>

添加输入文件元素onChange事件和使用它们的方法singlefileselected JS，所以用户调用此方法时，用户选择和修改的文件。在这种方法中，我们将选择输入文件的元素和文件对象访问的文件列表，选择第一个文件的文件{ 0 }，所以我们可以获取文件名，文件类型，其他信息。
功能singlefileselected（EVT）{
/ /无功selectedfile = evt.target.files可以使用或选择输入文件元素
并访问它的文件对象
无功selectedfile =（$（# uploadedFile））{ } { }。文件； / / filecontrol文件{ }；
如果（selectedfile）{
var文件大小=；
VaR的图像类型= / / *图像；
如果（selectedfile.size >）{
文件大小= math.round（selectedfile.size * / / ）+ MB；
}
如果（selectedfile.size >）{
文件大小= math.round（selectedfile.size * / / KB）+；
}
{其他
文件大小= selectedfile.size +字节；
}
在这里，我们将添加上传图像的缩略图预览。

$（#文件）。文本（名称+ selectedfile。名称）；
$（#文件），（文本类型+ selectedfile。型）；
$（#文件大小）。文本（大小+文件大小）；
}
}
该文件的内容可以阅读和记忆通过文件读取器对象上传。读者对象提供了许多事件，onload，OnError，四功能读取数据：readasbinarystring（），（），readastext readasarraybuffer（），（），结果readasdataurl属性表示文件的内容，仅当读操作被执行，和数据格式是根据初始化读操作的电话。

在这种情况下，文件的读写，不详细解释，我们将使用它在singlefileselected方法预览图像和看代码：
如果（selectedfile.type.match（图像类型））{
VaR的读者= FileReader（）；
reader.onload =功能（e）{
$（# imagecontainer ）空（）；
无功dataurl = reader.result；
VaR img =新的图像（）
img.src = dataurl；
Img.className = thumb;
$（# imagecontainer）。追加（IMG）；
}；
reader.readasdataurl（selectedfile）；
}
到目前为止，您可以看到下图：
现在你需要把文件上传到服务器，所以添加onclick事件并调用它的js上传下载（）方法和代码如下：
功能上传下载（）{
/ /我们可以通过形式的构造函数创建表单的形式
或使用附加函数手动创建它
但是，请注意，文件名应该与动作参数相同。
/ /无功datastring =新表单（）；
/ / datastring.append（uploadedFile

VaR形式=（#美元formupload）{ }；
无功datastring =新的表单（Form）；
$ ajax（{
URL / /上传上传， / /服务器脚本来处理数据
type'post，
XHR功能（自定义）{ / / XMLHttpRequest
无功myxhr =美元。ajaxsettings.xhr（）；
如果（myxhr。上传）检查上传属性存在{ / /
/ / myxhr.upload.onprogress = progresshandlingfunction
MyXhr.upload.addEventListener（进步，progresshandlingfunction，
false）；用于处理上载的进度
}
返回myxhr；
}，
事件
成功successhandler，
错误的程序，
completecompletehandler，
表单数据
Data dataString,
用于告诉jQuery不处理数据或担心内容类型的选项。
高速缓存错误，
ContentType假，
数据错误
}）；
}
在该方法中，发送形式和序列化文件形式的数据对象的值，我们可以手动创建的表单数据实例，暂停的域值通过调用append（）方法，或者检索HTML表单对象。

该方法将提供progresshandlingfunction是否上传的文件大小是可计算的测试，使用e.loaded和e.total计算已上传的数据量。
功能progresshandlingfunction（e）{
如果（e.lengthcomputable）{
无功percentcomplete = math.round（e.loaded * / e.total）；
$（# fileprogress ）Css（宽。
percentcomplete +%）。Attr（'aria-valuenow '，percentcomplete）；
$（# fileprogress跨度）。文本（percentcomplete +%）；
}
{其他
$（# fileprogress跨度）。文本（无法计算的）；
}
}
现在，我们基本上实现了发送数据和提供进度条的功能。接下来，我们需要在服务器端代码处理工具，使用uplpader上传动作方法和控制器。

在上传的方法，可以从httppostedfilebase对象获取文件信息，包含上传的文件，如文件名属性，contentType属性的对象的基本信息，InputStream属性等内容，这些信息可以用来接收验证服务器上的文件是没有错的，也可以用来保存文件。
市民JsonResult Upload（httppostedfilebase uploadedFile）
{
如果（uploadedFile！= null uploadedfile.contentlength >）
{
filebytearray =新的字节字节{ } { uploadedFile contentlength }；
uploadedfile.inputstream.read（filebytearray，uploadedFile。contentlength）；
附件newattchment =新的附件（）；
newattchment.filename = uploadedfile.filename；
newattchment.filetype = uploadedfile.contenttype；
newattchment.filecontent = filebytearray；
结果结果= attachmentmanager.saveattachment（newattchment）；
如果（结果。成功）
{
字符串htmlstring = capturehelper.renderviewtostring
（_attachmentitem，newattchment，这。ControllerContext）；
返回JSON（新的）
{
状态码=，
状态消息结果，
newrow = htmlstring
}，JsonRequestBehavior allowget）；
}
其他的
{
返回JSON（新的）
{
状态码=，
状态消息结果，
uploadedfile.filename文件=
}，JsonRequestBehavior allowget）；
}
}
返回JSON（新的）
{
状态码=，
状态错误请求！上传失败
文件=字符串，空的
}，JsonRequestBehavior allowget）；
}
多个文件上传可以通过拖放操作来实现吗
在这一部分中，实现相同的上传和添加一些新功能来上传：

允许选择多个文件

拖放

现在，添加新的功能Uplodaer View：

向输入文件元素添加多个属性，以同时实现多个文件。

添加一个实现拖放功能的文件，如下面的代码所示：
将图像在这里
添加onchange事件的JS方法multiplefileselected是类似以前的singlefileselected写作方法。区别在于所有文件都需要列出并允许拖放文件：
功能multiplefileselected（EVT）{
evt.stoppropagation（）；
Evt.preventDefault（）；
$（# drop_zone）。RemoveClass（'hover）；
selectedfiles = evt.target.files evt.datatransfer.files | |；
如果（selectedfiles）{
$（#文件）空（）；
对于（var i =；i < selectedfiles.length；i++）{
dataurlfilereader.read（selectedfiles {我}，功能（呃，FileInfo）{
如果（错误）！= NULL）{
无功rowinfo = 信息+类=
++ + +
<数据名称文件名
class=info+ fileinfo.name ++
< DIV数据类型=文件类型
class=info+ fileinfo.type ++
< DIV数据大小=文件大小
class=info+ fileinfo.size（+）
'；
$（#文件）添加（rowinfo）；
}
{其他
VaR形象= 类=拇指标题=+
fileinfo.name +/>；
无功rowinfo = 信息+类=
+
图像+
<数据名称文件名
class=info+ fileinfo.name ++
< DIV数据类型=文件类型
class=info+ fileinfo.type ++
< DIV数据大小=文件大小
class=info+ fileinfo.size（+）
'；
$（#文件）添加（rowinfo）；
}
}）；
}
}
}
在这种方法中，设置全局变量selectedfiles是被拖入的文件操作变量，然后扫描每一个文件selectedfiles，阅读方法是从dataurlreader对象调用读取文件。

DataURLreader对象可以调用read方法，和文件对象和回调方法作为阅读方法的参数。在上述方法中，我们创建了FileReader，和修改的onload和FileReader OnError回调函数调用的方法。readasdataurl读取文件。

新的FileInfo对象包括所有的文件的信息和内容。
Var DataURLFileReader = { {
读取函数（文件，回调）{
VaR的读者= FileReader（）；
VaR FileInfo = { {
名称file.name，
file.type型，
filecontent空，
size函数（）{
var文件大小=；
如果（file.size >）{
文件大小= math.round（file.size * / / ）+ MB；
}
如果（file.size >）{
文件大小= math.round（file.size * / / KB）+；
}
{其他
文件大小= file.size +字节；
}
返回文件的大小；
}
}；
如果（！file.type.match（图像。*））{
回调（不允许文件类型
返回；
}
reader.onload =函数（）{
http://www.ekangw.net/a/diannaoyingyong/2019/0404/fileinfo.filecontent = reader.result；
回调（null，FileInfo）；
}；
reader.onerror =函数（）{
回调（reader.error，FileInfo）；
}；
reader.readasdataurl（文件）；
}
}；
使用拖放操作选择
大多数浏览器现在有拖放操作，德雷弗拖放事件被添加到订单的drop_zone元实现拖放操作。

VaR的悬浮窗= document.getelementbyid（'drop_zone）；

DropZone.addEventListener（'draver '，handledraver，假）；

DropZone.addEventListener（放弃'，multiplefileselected，假）；

DropZone.addEventListener（'dragenter '，dragenterhandler，假）；

DropZone.addEventListener（'dragleave '，dragleavehandler，假）；

当文件拖到目标位置，触发德雷弗事件。在下面的代码中，我们修改默认浏览器和数据传输dropeffect属性。代码如下：
功能handledraver（EVT）{
Evt.preventDefault（）；
evt.datatransfer.effectallowed = 'copy；
evt.datatransfer.dropeffect = 'copy；
}
然后滴事件被添加到multiplefileselected处理文件删除操作。

大部分功能已经完善，现在你需要添加上传按钮通过onclick事件调用uploadmultiplefiles方法。

这种方法类似于上面提到的上传下载的方法，所不同的是手动验证的表单对象的值。
函数的UploadMultipleFiles（）{
在这里，我们将创建表单手动/防止发送我的图片文件
无功datastring =新表单（）；
/ / var文件= document.getelementbyid（uploadedfiles 文件）；
对于（var i =；i < selectedfiles.length；i++）{
如果（！SelectedFiles {我}。type.match（图像。*））{
继续；
}
}
请求代码在这里
}
接下来，添加与上面添加的代码类似的服务器端处理代码，您需要做的是接受一个文件列表，如下所示：

市民JsonResult UplodMultiple（httppostedfilebase { } uploadedfiles）
确保对httppostedfilebase数组名作为附加方法的名称相同，只有这样才能MVC被映射到文件的数组。

市民JsonResult UplodMultiple（httppostedfilebase { } uploadedfiles）

DataString.append（uploadedfiles
上传大文件
让一个大文件可以上传，如果您使用的是IIS7以上，你需要修改web.config文件，添加以下代码：

这里的所有功能都可以实现，最大值可以上传到2GB文件。

以上内容是一个小型编辑器，介绍了基于ajax和ajax的MVC实现文件上传功能，希望对您有所帮助。