这次给大家带来jquery.uploadify插件实现有进度条批量上传图片功能，jquery.uploadify插件实现有进度条批量上传图片的注意事项有哪些，下面就是实战案例，一起来看一下。
<%@ 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</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;
}
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
uploadify实现显示进度条上传图片
悬浮链接弹出图片特效实现
以上就是jquery.uploadify插件实现有进度条批量上传图片功能的详细内容。