欢迎来到51自学网!

51自学网

当前位置: 主页 > 脚本专题 >

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

时间:2018-07-28 10:52来源:网络整理 作者:51自学网
什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示。 官网提供的是PHP的DEMO,在这里我详细介绍在Asp.net下的使用. 下载 官方下载 官方文档
 什么是Uploadify

  Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不,带进度显示。

  官网提供的是PHP的DEMO,在这里我详细介绍在Asp.net下的使用.

  下载

    官方下载

    官方文档

    官方演示

脚本之家提供的Uploadify下载地址
  如何使用

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

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

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

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

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


4 Default.aspx的html页的代码修改如下:

复制代码 代码如下:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploadify</title>
<link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
rel="stylesheet" type="text/css" />
<link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
rel="stylesheet" type="text/css" />

<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

<script type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'auto': false,
'multi': true
});
});
</script>

</head>
<body>
<div></div>
<input type="file" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</p>
</body>
</html>


  5 UploadHandler类的ProcessRequest方法代码如下:

复制代码 代码如下:


public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";

HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath =
HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";

if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(uploadPath + file.FileName);
//下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}


  注意:这里一定要注意,一定要引用using System.IO;命名空间,我出的原因也是在这里,网上的教程基本上都没提到这一点,所以有很多网友会遇到IOError的错误。

6 运行后效果如下图:

  

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


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

  上面的代码就简单实现了上传的功能,依靠函数uploadify实现,uploadify函数的参数为json格式,可以对json对象的key值的修改来进行自定义的设置,如multi设置为true或false来控制是否可以进行多文件上传,下面就来介绍下这些key值的意思:

uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。
script :   后台处理程序的相对路径 。默认值:uploadify.php
checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method : 提交方式Post 或Get 默认为Post
scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain 
folder :  上传文件存放的目录 。
queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。
queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。
multi : 设置为true时可以上传多个文件。
auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。
fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:

  

fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit : 上传文件的大小限制 。
simUploadLimit : 允许同时上传的个数 默认值:1 。
buttonText : 浏览按钮的文本,默认值:BROWSE 。
buttonImg : 浏览按钮的图片的路径 。
hideButton : 设置为true则隐藏浏览按钮的图片 。
rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。
width : 设置浏览按钮的宽度 ,默认值:110。
height : 设置浏览按钮的高度 ,默认值:30。
wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。
cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:

  

上面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作。

onSelect :选择文件时触发,该函数有三个参数

  • event:事件对象。
  • queueID:文件的唯一标识,由6为随机字符组成。
  • fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性。

    代码如下:

    复制代码 代码如下:

    (责任编辑:admin)

  • 织梦二维码生成器
    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    ------分隔线----------------------------
    栏目列表
    推荐内容