<%@ 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 () { $(#pics).hide(); $(#uploadify).uploadify({ 'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路径 'script': 'uploadhandler.ashx?type=add', //处理文件上传的后台脚本的路径 'cancelimg': 'js/jquery.uploadify-v2.1.4/cancel.png', 'buttontext': 'select image', 'folder': 'uploadfile/<% = datetime.now.tostring("yyyymmdd") %>/', //上传文件夹的路径按20130416 'queueid': 'filequeue', //页面中，你想要用来作为文件队列的元素的id 'auto': false, //当文件被添加到队列时，自动上传 'multi': true, //设置为true将允许多文件上传 'fileext': '*.jpg;*.gif;*.png', //允许上传的文件后缀 'queuesizelimit': 5, 'filedesc': 'web image files (.jpg, .gif, .png)', //在浏览窗口底部的文件类型下拉菜单中显示的文本 'sizelimit': 1024000, //上传文件的大小限制，单位为字节 1024*1000 1m 'oncomplete': function (event, queueid, fileobj, response, data) { var html = ; html += <li class=\'myli\'>; html += <img src=\"" + response + "\" class=\'myimg\'/>; html += <p style=\" position:absolute; right:8px; bottom:5px\">; html += <img title=\"点击删除\" src=\"images/delete.gif\" onclick=\"delimage(\'" + response + "\');\" />; html += </p>; html += </li>; $(#pics).append(html); }, 'onallcomplete': function (event, data) { //当上传队列中的所有文件都完成上传时触发 //alert(data.filesuploaded + ' 个文件上传成功!'); $(#pics).fadein(); } }); }); function uploadpara() { //自定义传递参数 $('#uploadify').uploadifysettings('scriptdata', { 'name': $('#txtname').val(), 'albums': $('#txtalbums').val() }); $('#uploadify').uploadifyupload(); } function delimage(picurl) { jsonajax(uploadhandler.ashx, type=del&picurl= + picurl, text, callbacktxt); } function jsonajax(url, param, datat, callback) { $.ajax({ type: post, url: url, data: param, datatype: datat, success: callback, error: function () { jquery.fn.mbox({ message: '恢复失败' }); } }); } function callbacktxt(data) { var o = data; if (o != ) { var e = $(.myli img[src=' + data + ']); e.each(function () { $(this).parent().remove(); }) } else { alert(删除失败); } }; </script> <style type="text/css"> .myul { margin:5px 5px 5px 5px; padding:0px; } .myli { list-style-type:none; width:150px; height:150px; display:inline; position:relative; } .myimg { width:120px; height:120px; } </style> </head> <body> <form id="form1" runat="server"> <p> <p id="filequeue"></p> <input type="file" name="uploadify" id="uploadify" /> <p id="pics"> <ul class="myul"> </ul> </p> <p> <p> <a href="javascript:void(0);" onclick="uploadpara();">上传</a>| <a href="javascript:$('#uploadify').uploadifyclearqueue()">取消上传</a> </p> </p> </p> </form> </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; string type = context.request[type]; if (type==add) { 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(@context.request[folder] + file.filename); } else { context.response.write(); } } else if (type == del) { string picurl = context.request[picurl]; try { file.delete(context.server.mappath(picurl)); context.response.write(picurl); } catch { context.response.write(); } } else { } } public bool isreusable { get { return false; } } }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery easyui插件怎么创建菜单链接按钮
悬浮链接弹出图片特效实现
以上就是uploadify插件做出带进度条批量上传功能的详细内容。