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中的delete使用详解
Apr 11 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
js+css实现select的美化效果
Mar 24 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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
PHP新手上路(十)
2006/10/09 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
如何离线执行php任务
2017/02/21 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python入门篇之字典
2014/10/17 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
高级电工工作职责
2013/11/21 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
团队会宣传标语
2014/10/09 职场文书
2015年复活节活动总结
2015/02/27 职场文书
入党团支部推荐意见
2015/06/02 职场文书
家长反馈意见及建议
2015/06/03 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
导游词之张家界
2019/10/31 职场文书