Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
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 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类的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")
}
}
6 运行后效果如下图：
打开VS2013，选择文件->新建->项目。选择web应用程序，然后重命名为【UploadifyDemo】
选中项目右键->添加->web窗体，重命名为【Upload】
给【Upload.aspx】页面添加js和插件的引用。
给【Upload.aspx】页面添加上传文件js代码。
给【Upload.aspx】页面上传文件js添加【onUploadSuccess】属性，将英文提示改成中文“上传成功”。
给【Upload.aspx】页面添加HTML代码
选中项目右键->添加->新建项，然后找到一般处理程序，重命名为【UploadFile】。
在【UploadFile】添加后台上传文件的代码。
将【Upload.aspx】设为起始页后，按住ctrl+F5，就可以查看到结果了。
一、相关key值介绍uploader：uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。
script：后台处理程序的相对路径 。默认值：uploadify.php
scriptData：上传到后台的参数，参数为json格式。
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则隐藏浏览按钮的图片。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）