jQuery.Uploadify外掛程式實現帶進度條的批量上傳功能_jquery

本文執行個體講述了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 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 += "  <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) { //當上傳隊列中的所有檔案都完成上傳時觸發          //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">  <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"]; //擷取傳遞的參數      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相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴充技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選取器用法總結》及《jQuery常用外掛程式及用法總結》

希望本文所述對大家jQuery程式設計有所協助。