萬盛學電腦網 >> 腳本專題 >> javascript >> Jquery Uploadify上傳帶進度條介紹
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 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 () { $("#uploadify").uploadify({ 'uploader': 'js/jquery.uploadify-v2.1.4/uploadify.swf', //uploadify.swf文件的路徑 'script': 'UploadHandler.ashx', //處理文件上傳的後台腳本的路徑 'cancelImg': 'js/jquery.uploadify-v2.1.4/cancel.png', 'folder': 'UploadFile/<% = subpathName %>', //上傳文件夾的路徑 'queueID': 'fileQueue', //頁面中，你想要用來作為文件隊列的元素的id 'auto': false, //當文件被添加到隊列時，自動上傳 'multi': true, //設置為true將允許多文件上傳 'fileExt': '*.jpg;*.gif;*.png', //允許上傳的文件後綴 'fileDesc': 'Web Image Files (.JPG, .GIF, .PNG)', //在浏覽窗口底部的文件類型下拉菜單中顯示的文本 'sizeLimit': 102400, //上傳文件的大小限制，單位為字節 100k 'onCancel': function (event, ID, fileObj, data) { //當從上傳隊列每移除一個文件時觸發一次 alert('The upload of ' + fileObj.name + ' has been canceled!'); }, 'onComplete': function (event, ID, fileObj, response, data) { //每完成一次文件上傳時觸發一次 alert('There are ' + data.fileCount + ' files remaining in the queue.'); }, 'onAllComplete': function (event, data) { //當上傳隊列中的所有文件都完成上傳時觸發 alert(data.filesUploaded + ' files uploaded successfully!'); } }); }); </script> </head> <body> <form id="form1" runat="server"> <div> </div> </form> <div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a> </p> </body> </html> 代碼如下: <%@ WebHandler Language="C#" Class="UploadHandler" %> using System; using System.Web; using System.IO; public class UploadHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]); if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(Path.Combine(uploadPath, file.FileName)); context.Response.Write("1"); } else { context.Response.Write("0"); } } public bool IsReusable { get { return false; } } }javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved