当前位置: 移动技术网 > IT编程>开发语言>JavaScript > Jquery Uploadify多文件上传带进度条且传递自己的参数

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

2018年09月20日  | 移动技术网IT编程  | 我要评论

代码如下:


<%@ page language="c#" autoeventwireup="true" codefile="upload.x.cs" inherits="uploadifydemo_upload" %>

<html xmlns="https://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">
<p>
用户名:<asp:textbox id="txtname" runat="server"></asp:textbox><br/>
相册名:<asp:textbox id="txtalbums" runat="server"></asp:textbox>
</p>
</form>


<p id="filequeue"></p>
<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;
}
}
}

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网