jQuery.Uploadify plug in for batch upload with progress bar
- 2021-06-28 08:25:09
- OfStack
This article provides an example of how the jQuery.Uploadify plug-in enables bulk upload with a progress bar.Share it for your reference, as follows:
<%@ 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 Upload band progress bar with multiple parameters </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 Path to file
'script': 'UploadHandler.ashx?type=add', // Path to background script that handles file uploads
'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png',
'buttonText': 'Select Image',
'folder': 'UploadFile/<% = DateTime.Now.ToString("yyyyMMdd") %>/', // Upload folder by path 20130416
'queueID': 'fileQueue', // On the page, what you want to use as an element of the file queue id
'auto': false, // Upload files automatically when they are added to the queue
'multi': true, // Set to true Multiple file uploads will be allowed
'fileExt': '*.jpg;*.gif;*.png', // File Suffixes Allowed to Upload
'queueSizeLimit': 5,
'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', // Text displayed in the file type drop-down menu at the bottom of the browsing window
'sizeLimit': 1024000, // Size limit for uploaded files in bytes 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=\" Click Delete \" src=\"Images/delete.gif\" onclick=\"delImage(\'" + response + "\');\" />";
html += " </div>";
html += " </li>";
$("#pics").append(html);
},
'onAllComplete': function (event, data) { // Triggered when all files in the upload queue have finished uploading
//alert(data.filesUploaded + ' Files uploaded successfully !');
$("#pics").fadeIn();
}
});
});
function uploadpara() {
// Custom Pass-through Parameters
$('#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: ' restore failed '
});
}
});
}
function callBackTxt(data) {
var o = data;
if (o != "") {
var e = $(".myli img[src='" + data + "']");
e.each(function () {
$(this).parent().remove();
})
} else {
alert(" Delete failed ");
}
};
</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();"> upload </a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()"> Cancel upload </a>
</p>
</div>
</div>
</form>
</body>
</html>
<%@ WebHandler Language="C#" Class="UploadHandler" %>
using System;
using System.Web;
using System.IO;
/// <summary>
/// UploadHandler File Upload
/// </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"]; // Get parameters passed
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;
}
}
}
More readers interested in jQuery-related content can view this site's topics: Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Dragging Special Effects and Skills Summary, jQuery Extension Skills Summary, jQuery General Classic Special Effects Summary, jQuery Animation and Usage Summary,jquery Selector Usage Summary and jQuery Common Plugins and Usage Summary
I hope that the description in this paper will be helpful to everyone's jQuery program design.