前言:這幾天作項目的須要學習了一下uploadify這個jquery插件如何使用的,我在網上也找了好的資料,他們發的都是舊的,是v2.x的,我從下載的是v3.2的,我本身在官網學習了一個這個插件的使用方法,官方默認的使用的是PHP語言,這裏的筆記我用的是C#語言寫的(參考的是網上的資料)。javascript
Uploadify下載地址:http://www.uploadify.com這裏下載的是最新版的v3.2,下載下來以後是會有不少的文件這是我下載的圖:
css
在這麼多文檔中咱們須要的就是uplodify.css和uploadify.swf、uploadify-cancle.png、jquery-uploadify.min.js(jquery-uploadify.js中的其中一個),固然了還有就是jquery庫哦!html
我作的項目的目錄:java
這是我創建一個Default.aspx文件的內容: jquery
<link href="css/uploadify.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/jquery.uploadify.min.js" type="text/javascript"></script>
<%//引入相應的文件 %> <link href="css/uploadify.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/jquery.uploadify.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#uploadify').uploadify({ //'debug':'false', //是否調試 //'buttonClass': 'buttonSum', //按鈕的樣式 //'buttonCursor':'hand', //按鈕的Cursor 'fileTypeDesc': 'Web Files', //容許文件的描述 'fileTypeExts': '*.gif; *.jpg; *.png', //文件的種類(必須和fileTypeDesc一塊兒使用) 'uploader': 'UploadHandler.ashx', //處理的後臺程序 'swf': 'js/uploadify.swf', //引入swf文件 'cancelImg': 'img/uploadify-cancel.png', //退出的圖片 'auto': 'true', //是否自動上傳 'buttonText': '選擇文件', //按鈕的文本 'folder': '/Uploads', //服務器端的路徑 'fileSizeLimit': '0', //上傳文件的大小 'onSelect':function(file){ //選擇完成後的回調函數 alert(file.name); }, 'onUploadComplete': function (file) { //上傳完成的回調事件 alert('上傳成功'); } }); }); </script>
還有有就是UploadHandler.ashx的內容服務器
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; namespace UploadifyDemo { /// <summary> /// UploadHandler 的摘要說明 /// </summary> 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("\\Uploads" + "\\"); if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //下面這句代碼缺乏的話,上傳成功後上傳隊列的顯示不會自動消失 context.Response.Write("1"); } else { context.Response.Write("0"); } } public bool IsReusable { get { return false; } } } }
以上就是這個例子,本人也是初學!jquery插件
還有我在網上找到到幾個不錯的文章能夠參考:http://www.abc3210.com/2012/js_09/jquery-uploadify.shtml 函數
http://www.cnblogs.com/akingyao/archive/2012/09/04/2670794.html學習