JQuery上传插件上传使用详解及错误处理

什么是上传上传上传是框架的一个上传插件，支持多文件上传，实现的效果非常不错，带进度显示。官网提供的是服务器端编程语言(专业超文本预处理器的缩写)的演示，在这里我详细介绍在Asp.net下的使用。下载官方下载官方文档官方演示我们提供的上传下载地址如何使用一创建网项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中2在项目中添加UploadHandler.ashx文件用来处理文件的上传。 3 在项目中添加上传文件文件夹，用来存放上传的文件。进行完上面三步后项目的基本结构如下图：

四默认值。文件的超文本标记语言页的代码修改如下：复制代码代码如下： 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=' 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 /html 5 UploadHandler类的输出结果代码分析方法代码如下：复制代码代码如下：公共无效进程请求(HttpContext上下文){上下文.响应。内容类型='文本/纯文本；语境回应。charset=' utf-8 '；HttpPostedFile文件=上下文。请求文件['文件数据'];字符串uploadPath=HttpContext .当前。服务器。mappath(@ context .请求['文件夹'])' \ \ ';如果(文件！=null) { if(！目录。存在（上传路径)){目录。创建目录（上传路径);}文件。另存为（上传路径文件. FIlename)；//下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失语境。回应。写下(' 1 ');} else { context .响应。写入(' 0 ');} } 注意：这里一定要注意，一定要引用使用系统IO；命名空间，我出错的原因也是在这里，网上的教程基本上都没提到这一点，所以有很多网友会遇到输出异常的错误。 6 运行后效果如下图

7选择两个文件后，点击上传，可以看到这两个文件将被添加到上传文件文件夹中。上面的代码简单的实现了上传功能，通过函数uploadify来实现。uploadify函数的参数采用json格式，可以通过修改json对象的键值进行自定义。例如，multi设置为true或false，以控制是否可以上传多个文件。我们来介绍一下这些键值的含义：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属性后才有效。用于在文件选择对话框中设置提示文本。例如，如果将Filedec设置为“请选择rar文档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和数据，前三个参数的解释同上。数据对象有四个属性：百分比、字节加载、全部字节加载、速度：百分比：当前完成百分比字节加载：当前上传大小全部字节加载：文件队列中的上传大小速度：上传速率kb/s完成：文件上传后触发。该函数有四个参数：事件、queueId、fileObj、响应和数据，前三个参数同上。响应是后台处理程序返回的值，在上面的示例中是1或0。数据有两个属性：fileCount和speedfileCount:尚未上传的剩余文件数。速度：文件上传的平均速度，单位为kb/s注意：fileObj对象与上面提到的有些不同。文件完成的文件对象有一个文件路径属性来检索上传文件的路径。OnAllComplete:文件队列中的所有文件上传后触发。该函数有两个参数，事件和数据，数据有四个属性，即file uploaded上传的所有文件数：错误：发生的错误数。AllBytesLoaded:所有上载文件的总大小。速度：平均上传速率kb/s相关函数介绍在上面的例子中，使用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：uploadifySettings:上面介绍的那些键值是可以动态修改的，比如下面的代码$ ('# uploadify ')。uploadify设置('文件夹'，' js ')；如果上传按钮的事件编写如下，文件将被上传到uploadifySettings a href=' JavaScript : $(' # uploadify ')定义的目录。uploadify设置('文件夹'，' js ')；$ ('# uploadify ')。uploadify upload()' upload/auploadifyserve:此函数接受一个queueID作为参数，并且可以取消文件队列中指定了queueID的文件。$('#uploadify ')。uploadifyCancel(id)；好了，所有的配置都完成了。来说说我遇到的一些问题。span style=' font-size : 18pt；可能的问题1。我开始配置后，它不能正常工作。flash(uploadify . swf’)未加载。

后来查了jquery.uploadify.v2.1.0.js，发现这个插件是swfobject.js动态创建的一个flash后来我一个人试了也不能显示这个FLASH，但是如果没有足够的容忍度可以重启电脑。晕倒~ ~ ~ 2。Flash终于加载进去了，但是上传又失败了。报告IOError，如图：。

迷茫的我翻遍了各大网络，终于用System看到了这样一句话。国外网站上的IO。突然加！还没有遇到其他问题，以后找到了再补充。上传我们提供的下载地址。