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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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
建立动态的WML站点(三)
2006/10/09 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
python中的__slots__使用示例
2015/02/26 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
网络工程师的自我评价
2013/10/02 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
先进工作者获奖感言
2014/02/08 职场文书
酒店开业策划方案
2014/06/02 职场文书
大学迎新标语
2014/06/26 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
工作证明英文模板
2014/10/21 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
争做文明公民倡议书
2019/06/24 职场文书
详解Python常用的魔法方法
2021/06/03 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电