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


Posted in Javascript onAugust 28, 2013
<%@ 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; 
} 
} 
}
Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
ExtJS DOM元素操作经验分享
Aug 28 #Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 #Javascript
在JavaScript中实现类的方式探讨
Aug 28 #Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 #Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 #Javascript
JQuery筛选器全系列介绍
Aug 27 #Javascript
HTML Color Picker(js拾色器效果)
Aug 27 #Javascript
You might like
短波的认识
2021/03/01 无线电
简单的php 验证图片生成函数
2009/05/21 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python取均匀不重复的随机数方式
2019/11/27 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
python中数字是否为可变类型
2020/07/08 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
暑假实习求职信范文
2013/09/22 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
何玥事迹观后感
2015/06/16 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js