Jquery Uploadify多文件上传带进度条且传递自己的参数

最新推荐文章于 2023-04-11 17:22:06 发布

转角遇到她

最新推荐文章于 2023-04-11 17:22:06 发布

阅读量1.2k

点赞数

分类专栏： Javascript 文章标签： Uploadify 多文件上传进度条

本文链接：https://blog.csdn.net/vovo1122/article/details/10484175

版权

Javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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上传带进度条，且多参数-www.jbxue.com</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);" οnclick="uploadpara();">上传</a>| 
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a> 
</p> 
</body> 
</html>

2，c#代码部分

<%@ 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; 
} 
} 
}

转角遇到她

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery Uploadify多文件上传带进度条且传递自己的参数

Jquery Uploadify多文件上传带进度条且传递自己的参数。代码： Jquery Uploadify上传带进度条，且多参数-www.jbxue.com $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': 'js/jquery.uploadify-v2.1.
复制链接

扫一扫

专栏目录