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 相关文章推荐
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
javascript实现微信分享
Dec 23 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
JavaScript表单验证实现代码
May 22 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
第五节 克隆 [5]
2006/10/09 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python入门篇之字符串
2014/10/17 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python使用re模块验证危险字符
2020/05/21 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python能做哪方面的工作
2020/06/15 Python
Django如何重置migration的几种情景
2021/02/24 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
中学教师暑期培训方案
2014/08/27 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
三八妇女节致辞
2015/07/31 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python