jQuery實現的仿百度分頁足跡效果代碼
622
2024-03-22
本文實例講述了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 rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery.uploadify-v2.1.4/swfobject.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1902/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="http://www.gimoo.net/t/1902/5c60f3427e569.html" + response + "" class='myimg'/>"; html += " <div style=" position:absolute; right:8px; bottom:5px">"; html += " <img title="點擊刪除" src="http://www.gimoo.net/t/1902/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='http://www.gimoo.net/t/1902/5c60f3427e569.html" + 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程序設計有所幫助。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!