Welcome 微信登录

首页 / 脚本样式 / JavaScript / Jquery Uploadify多文件上传带进度条且传递自己的参数

复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Jquery Uploadify上传带进度条,且多参数</title>
<link href="js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
"uploader": "js/jquery.uploadify-v2.1.4/uploadify.swf", //uploadify.swf文件的路径
"script": "UploadHandler.ashx", //处理文件上传的后台脚本的路径
"cancelImg": "js/jquery.uploadify-v2.1.4/cancel.png",
"folder": "UploadFile/<% = DateTime.Now.ToString("yyyyMMdd") %>", //上传文件夹的路径按20130416
"queueID": "fileQueue", //页面中,你想要用来作为文件队列的元素的id
"auto": false, //当文件被添加到队列时,自动上传
"multi": true, //设置为true将允许多文件上传
"fileExt": "*.jpg;*.gif;*.png", //允许上传的文件后缀
"fileDesc": "Web Image Files (.JPG, .GIF, .PNG)", //在浏览窗口底部的文件类型下拉菜单中显示的文本
"sizeLimit": 102400, //上传文件的大小限制,单位为字节 100k
"onAllComplete": function (event, data) { //当上传队列中的所有文件都完成上传时触发
alert(data.filesUploaded + " 个文件上传成功!");
}
});
});

function uploadpara() {
//自定义传递参数
$("#uploadify").uploadifySettings("scriptData", { "name": $("#txtName").val(), "albums": $("#txtAlbums").val() });
$("#uploadify").uploadifyUpload();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名:<asp:TextBox ID="txtName" runat="server"></asp:TextBox><br/>
相册名:<asp:TextBox ID="txtAlbums" runat="server"></asp:TextBox>
</div>
</form>


<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:void(0);" onclick="uploadpara();">上传</a>|
<a href="javascript:$("#uploadify").uploadifyClearQueue()">取消上传</a>
</p>
</body>
</html>

复制代码 代码如下:
<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;
using System.Web;
using System.IO;

/// <summary>
/// UploadHandler文件上传
/// </summary>
public class UploadHandler : IHttpHandler
{
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"]);
string name = context.Request.Params["name"]; //获取传递的参数
string albums = context.Request.Params["albums"];
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(Path.Combine(uploadPath, file.FileName));
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}

public bool IsReusable
{
get
{
return false;
}
}
}