Uploadify Flash无刷新 上传文件
|
Uploadify :是一款很好用的js、Flash无刷新上传组件，今天手上没活研究了下。（挺简单的，此文主要用来记录下。） 开发包下载地址 官方Demo
所建的工程目录：注意文件夹的路径问题。 源代码： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="FlashUpload_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="uploadify-v2.1.4/uploadify.css" rel="Stylesheet" />
<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js"></script>
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'uploader': 'uploadify-v2.1.4/uploadify.swf','script': 'DoFile.ashx','cancelImg': 'uploadify-v2.1.4/cancel.png','folder': 'uploads','sizeLimit': 1024000,'fileExt ': '*.jpg','auto': false,//控制多文件上传
'multi': true,'onComplete': function(vent,queueId,fileObj,response,data) {
alert(response);
}
});
});
</script>
</head>
<body>
<input id="file_upload" type="file" name="Filedata" />
<br />
<a href="javascript:$('#file_upload').uploadifyUpload()">上传</a>
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</body>
</html>
这里我用了一个DoFile.ashx文件来处理文件的上传： <%@ WebHandler Language="C#" Class="DoFile" %>
using System;
using System.Web;
using System.IO;
public class DoFile : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
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");
context.Response.End();
}
context.Response.Write("0");
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
这样就可以实现文件上传了。 注：这里的 context.Response.Write("");
context.Response.End();只是用来处理单文件上传成功后的相应值，多文件则无法响应！因为
onAllComplete：function（event，data）二个参数具体应用请查看api。
网上api如下： uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。 fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。 onInit : 做一些初始化的工作。 onSelect ：选择文件时触发，该函数有三个参数
onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
? onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。
? onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel中的两个对应参数。 onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。 onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。
? onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。 onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：
? onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed
注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。 ? onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
