本文實例講述了jQuery.Uploadify插件實現(xiàn)帶進度條的批量上傳功能。分享給大家供大家參考，具體如下：
代碼如下:
<%@ 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上傳帶進度條，且多參數(shù)</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, //設(shè)置為true將允許多文件上傳
'fileExt': '*.jpg;*.gif;*.png', //允許上傳的文件后綴
'queueSizeLimit': 5,
'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'sizeLimit': 1024000, //上傳文件的大小限制，單位為字節(jié) 1024*1000 1M
'onComplete': function (event, queueID, fileObj, response, data) {
var html = "";
html += " <li class=\'myli\'>";
html += " <img src=\"" + response + "\" class=\'myimg\'/>";
html += " <div style=\" position:absolute; right:8px; bottom:5px\">";
html += " <img title=\"點擊刪除\" src=\"Images/delete.gif\" onclick=\"delImage(\'" + response + "\');\" />";
html += " </div>";
html += " </li>";
$("#pics").append(html);
},
'onAllComplete': function (event, data) { //當上傳隊列中的所有文件都完成上傳時觸發(fā)
//alert(data.filesUploaded + ' 個文件上傳成功!');
$("#pics").fadeIn();
}
});
});
function uploadpara() {
//自定義傳遞參數(shù)
$('#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: '恢復(fù)失敗'
});
}
});
}
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">
<div>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<div id="pics">
<ul class="myul">
</ul>
</div>
<div>
<p>
<a href="javascript:void(0);" onclick="uploadpara();">上傳</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>
</p>
</div>
</div>
</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"]; //獲取傳遞的參數(shù)
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程序設(shè)計有所幫助。
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試