AspNet中使用JQuery上传插件上传详解

首先按下面的步骤来实现一个简单的上传功能。

一创建网项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。

2在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3在项目中添加上传文件文件夹，用来存放上传的文件。

进行完上面三步后项目的基本结构如下图：

四默认值。aspx的超文本标记语言页的代码修改如下：

html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' title uploadify/title link href=' JS/jquery。uploadify-v 2。1 .0/示例/CSS/默认值。CSS ' rel='样式表type=' text/CSS '/link href=' JS/jquery。uploadify-v 2。1 .0/uploadify。CSS ' rel='样式表type=' text/CSS ' ready(function(){ $(' # uploadify ')).upload ify({ ' uploader ' : ' JS/jquery。uploadify-v 2。1 .0/uploadify。swf '，'脚本' : ' uploadhandler。ashx '，' cancelimg ' : ' JS/jquery。uploadify-v 2。1 .0/取消。png '，' folder': 'UploadFile '，' queueID': 'fileQueue '，' auto ' : false，' multi ' : true })})；/script/head body div id=' Filequeue '/div input type=' file ' name=' uploadify ' id=' uploadify '/p a href=' JavaScript : $(' # uploadify ')' .' uploadifyUpload()'上传/a | a href=' JAVAScript : $(' # uploadify ').' uploadifyClearQueue()'取消上传/a /p/body/html5 UploadHandler类的ProcessRequest方法代码如下：

公共无效进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；语境回应。charset=' utf-8 '；HttpPostedFile文件=上下文。请求文件['文件数据'];字符串uploadPath=HttpContext .当前。服务器。mappath(@ context .请求['文件夹'])' \ \ ';如果(文件！=null) { if(！目录。存在（上传路径)){目录。创建目录（上传路径);}文件。另存为（上传路径文件. FIlename)；//下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失语境。回应。写下(' 1 ');} else { context .响应。写入(' 0 ');} }6 运行后效果如下图：

七选择了两个文件后，点击上传，就可以看到上传文件文件夹中会增加这两个文件。

上面简单地实现了一个上传的功能，依靠函数上传实现，上传函数的参数为json格式，可以对json对象的键值的修改来进行自定义的设置，如多（前缀)设置为真实的或错误的来控制是否可以进行多文件上传，下面就来介绍下这些键值的意思：

uploader:uploadify . swf文件的相对路径，是一个带有文本BROWSE的按钮。单击后，打开文件的对话框将逐渐消失。默认值为uploadify.swf. Script:后台处理程序的相对路径。默认值：uploadify.php检查脚本：用于判断服务器中是否存在上传的选定文件的后台处理器的相对路径。文件数据名称：设置一个名称，根据该名称在服务器处理器中检索上传文件的数据。默认为文件数据方法：提交方法发布或获取。默认为PostScript访问：Flash脚本文件访问模式。如果设置为总是在本地测试中，默认值是sameDomain文件夹：存储上传文件的目录。QueueID:文件队列的ID，与存储文件队列的div的ID一致。QueueSizeLimit:当允许生成多个文件时，设置选定文件的数量。默认值为999。Multi:设置为true时，可以上传多个文件。Auto:设置为true，选择后直接上传文件；如果设置为false，则仅在单击上传按钮后才会上传。Filedec:该属性值只有在设置了fileExt属性后才有效。它用于在文件选择对话框中设置提示文本。例如，如果将fileDesc设置为“请选择rar doc pdf文件”，打开文件选择框的效果如下：

FileExt:设置可以选择的文件类型，如：' * '。doc*.pdf*.rar .SizeLimit:上传文件的大小限制。SimUploadLimit:允许同时上传的次数。默认值：1。text:BROWSE按钮的文本。默认值是浏览。Img:浏览按钮图片的路径。HideButton:设置为true以隐藏浏览按钮的图片。翻转：值为真和假。当设置为true时，当鼠标移动到浏览按钮上时，它将具有反转效果。宽度：设置浏览按钮的宽度；默认值为110。高度：设置浏览按钮的高度；默认值为30。Wmode:将此项设置为透明可以使浏览按钮的flash背景文件透明，flash文件将被设置为页面的顶层。默认值：不透明。CancelImg:将文件放入文件队列后，选择每个文件上的关闭按钮图标，如下图所示：

上面介绍的键值的值是字符串或布尔类型，相对简单。接下来要介绍的键值的值是一个函数，它可以在选择文件、出错或进行其他操作时向用户返回一些信息。

OnInit :做一些初始化工作。

开：选择文件时触发；这个函数有三个参数。

Event:事件对象。QueueID:文件的唯一标识符，由6个随机字符组成。选择的文件对象有五个属性：名称、大小、创建日期、修改日期和类型。代码如下：

$(文档)。ready(function(){ $('#uploadify '))。uploadify({ ' uploader ' : ' JS/jquery . uploadify-v 2 . 1 . 0/uploadify . swf '，' script ' : ' uploadhandler . ashx '，' cancellimg ' : ' JS/jquery . uploadify-v 2 . 1 . 0/cancel . png '，' folder': 'UploadFile '，' queueID ' : ' fileQueue '，' auto ' : false，' multi ' : true '}、“on select”:函数(e，queueid，fileobj) {alert('唯一标识符：' queueId '\r\n ' '文件名：' fileObj.name '\r\n ' '文件大小：' fileObj.size '\ R\n ' '创建时间：' fileObj.creationDate '\r\n ' '上次修改时间：' FileObj . modification ondate ' \ R \ n ' '文件类型：' FileObj . type)；} });});选择文件后弹出的消息如下：

OnSelectOnce:在上传单个文件或多个文件时选择文件时触发。该函数有两个参数事件数据，数据对象具有以下属性：

文件计数：选定文件的总数。文件选定：同时选择文件的数量。如果一次选择三个文件，属性值为3。FilesReplaced:如果文件队列中已经存在A和B两个文件，当再次选择文件时，选择A和B，属性值为2。AllBytesTotal:所有选定文件的总大小。当您单击文件队列中文件的关闭按钮或单击取消上传时，会触发OnCancel :该函数有四个参数：事件、queueId、fileObj和数据。前三个参数与onSelect中的参数相同。数据对象有两个属性：文件计数和所有字节数据。

FileCount:取消文件后文件队列中剩余的文件数。AllBytesTotal:取消文件后文件队列中剩余文件的大小。OnClearQueue:调用函数fileUploadClearQueue时触发。有两个参数，事件和数据，与onCancel中对应的两个参数相同。

OnQueueFull:当设置了queueSizeLimit且选定文件的数量超过queueSizeLimit的值时触发。该函数有两个参数，事件和queueSizeLimit。

OnError:上传过程中出现错误时触发。该函数有四个参数：event、queueId、fileObj和errobj，其中前三个参数同上，errobj对象有两个属性：type和info。

类型：有三种类型的错误：“http”、“io”或“security”信息：错误描述onOpen:单击上传时触发，如果auto设置为true，则在选择文件时触发，如果上传了多个文件，则遍历整个文件队列。该函数有三个参数：事件、queueId和fileObj，参数的解释同上。

OnProgress:单击上传时触发，如果auto设置为true，则在选择文件时触发，如果有多个文件上传，则遍历整个文件队列，并在onOpen后触发。该函数有四个参数：事件、queueId、fileObj和数据，前三个参数的解释同上。数据对象有四个属性：百分比、字节加载、所有字节加载和速度：

百分比：当前完成的字节数百分比：当前上载的大小allBytesLoaded:文件队列中的上载大小速度：上载速率kb/sonComplete:文件上载完成后触发。该函数有四个参数：事件、queueId、fileObj、响应和数据，前三个参数同上。Response是后台处理程序返回的值，在上面的示例中是1或0。数据有两个属性，文件计数和速度。

FileCount:尚未上传的剩余文件数。速度：文件上传的平均速度，单位为kb/s注意：fileObj对象与上面提到的有些不同。文件完成的文件对象有一个文件路径属性来检索上传文件的路径。

OnAllComplete:文件队列中的所有文件上传后触发。该函数有两个参数，事件和数据，数据有四个属性，分别是：

文件上传：上传的所有文件的数量。错误：发生的错误数。AllBytesLoaded:所有上载文件的总大小。速度：平均上传速率kb/s。

相关功能介绍。

在上面的例子中，使用了两个函数，uploadifyUpload和uploadifyClearQueue，还有其他几个函数：

UploadifySettings:可以动态修改上面介绍的键值，如下面的代码所示。

$('#uploadify ')。uploadifySettings('文件夹'，' JS ')；如果上传按钮的事件编写如下，文件将被上传到uploadifySettings定义的目录。

a href=' JavaScript : $(' # uploadify ')。uploadifySettings('文件夹'，' JS ')；$ ('# uploadify ')。uploadify upload()' upload/auploadifyserve:此函数接受一个queueID作为参数，并且可以取消文件队列中指定了queueID的文件。

$('#uploadify ')。uploadifyCancel(id)；花了一个晚上写完，基本理解了JQuery这个上传插件。希望对大家有帮助，有错误希望大家指正。

以上就是本文的全部内容，希望大家喜欢。