系列目錄html
文件上傳這東西說到底有時候很痛,原來的asp.net服務器控件提供了很簡單的上傳,可是有回傳,尚未進度條提示。此次咱們演示利用swfupload多文件上傳,項目上文件上傳是比不可少的,你們這個內心都知道。主要提供給源碼說明及下載web
最終效果圖:瀏覽器
SWFUpload的特色:緩存
一、用flash進行上傳,頁面無刷新,且可自定義Flash按鈕的樣式;服務器
二、能夠在瀏覽器端就對要上傳的文件進行限制;asp.net
三、容許一次上傳多個文件,但會有一個上傳隊列,隊列裏文件的上傳是逐個進行的,服務器端接收文件時跟普通的表單上傳文件是同樣的;dom
四、提供了豐富的事件接口供開發者使用;函數
SWFUpload的文件上傳流程是這樣的:post
一、引入相應的js文件字體
二、實例化SWFUpload對象,傳入一個配置參數對象進行各方面的配置。
三、點擊SWFUpload提供的Flash按鈕,彈出文件選取窗口選擇要上傳的文件;
四、文件選取完成後符合規定的文件會被添加到上傳的隊列裏;
五、調用startUpload方法讓隊列裏文件開始上傳;
六、文件上傳過程當中會觸發相應的事件,開發者利用這些事件來更新ui、處理錯誤、發出提示等等;
SWFUpload包括三部分的內容:SWFUpload.js、swfupload.swf、初始化配置參數及各類事件處理函數。因此首先在頁面引入SWFUpload.js
其實實現一個文件上傳是很簡單的,可是要實現一個繼承了可配置有水印有縮略圖的圖片上傳功能仍是很是繁瑣的.
配置參數對象中的經常使用屬性及說明
屬性 | 類型 | 默認值 | 描述 |
---|---|---|---|
upload_url | String | 處理上傳文件的服務器端頁面的url地址,能夠是絕對地址,也能夠是相對地址,當爲相對地址時相對的是當前代碼所在的文檔地址 | |
preserve_relative_urls | Boolean | false | 若是爲false則SWFUpload會把swfupload.swf用到的相對地址轉換爲絕對地址,以達到更好的兼容性 |
file_post_name | String | Filedata | 至關於用普通的文件域上傳文件時的name屬性,服務器端接收頁面經過該名稱來獲取上傳的文件 |
post_params | Object(直接量) | 一個對象直接量,裏面的鍵/值對會隨着每個文件一塊兒上傳,文件上傳要附加一些信息時頗有用 | |
use_query_string | Boolean | false | 爲false時,post_params屬性定義的參數會以post方式上傳;爲true時,則會以get方式上傳(即參數會以查詢字符串的形式附加到url後面) |
file_types | String | 該屬性指定了容許上傳的文件類型,當有多個類型時使用分號隔開,好比:*.jpg;*.png ,容許全部類型時請使用 *.* | |
file_types_description | String | 指定在文件選取窗口中顯示的文件類型描述,起一個提示和說明的做用吧 | |
file_size_limit | String | 指定要上傳的文件的最大致積,能夠帶單位,合法的單位有:B、KB、MB、GB,若是省略了單位,則默認爲KB。該屬性爲0時,表示不限制文件的大小。 | |
file_upload_limit | Number | 指定最多能上傳多少個文件,當上傳成功的文件數量達到了這個最大值後,就不能再上傳文件了,也不能往上傳隊列裏添加文件了。把該屬性設爲0時表示不限制文件的上傳數量。 | |
file_queue_limit | Number | 指定文件上傳隊列裏最多能同時存放多少個文件。當超過了這個數目後只有當隊列裏有文件上傳成功、上傳出錯或被取消上傳後,等同數量的其餘文件才能夠被添加進來。當file_upload_limit的數值或者剩餘的能上傳的文件數量小於file_queue_limit時,則取那個更小的值 | |
flash_url | String | swfupload.swf文件的絕對或相對地址,相對地址是指相對於當前的頁面地址。實例化swfupload後,就不能再改變該屬性的值了。 | |
prevent_swf_caching | Boolean | 爲true時會加一個隨機數在swfupload.swf地址的後面,以阻止flash影片被緩存,這是爲了防止某些版本的IE瀏覽器在讀取緩存的falsh影片時出現的bug | |
button_placeholder_id | String | 指定一個dom元素的id,該dom元素在swfupload實例化後會被Flash按鈕代替,這個dom元素至關於一個佔位符 | |
button_placeholder | DOMElement | 指定一個dom元素,該dom元素在swfupload實例化後會被Flash按鈕代替,這個dom元素至關於一個佔位符。當button_placeholder_id與button_placeholder都存在時,以button_placeholder_id爲優先 | |
button_image_url | String | 指定Flash按鈕的背景圖片,相對地址或絕對地址均可以。該地址會受到preserve_relative_urls屬性的影響,聽從與upload_url同樣的規則。 該背景圖片必須是一個sprite圖片,從上到下包含了Flash按鈕的正常、鼠標懸停、按下、禁用這四種狀態。所以該圖片的高度應該是Flash按鈕高度的四倍 |
|
button_width | Number | 指定Flash按鈕的寬度 | |
button_height | Number | 指定Flash按鈕的高度,應該爲button_image_url所指定的按鈕背景圖片高度的1/4 | |
button_text | String | 指定Flash按鈕上的文字,也能夠是html代碼 | |
button_text_style | String | Flash按鈕上的文字的樣式,使用方法見示例 | |
button_text_top_padding | Number | 指定Flash按鈕頂部的內邊距,可以使用負值 | |
button_text_left_padding | Number | 指定Flash按鈕左邊的內邊距,可以使用負值 | |
button_disabled | Boolean | false | 爲true時Flash按鈕將變爲禁用狀態,點擊也不會觸發任何行爲 |
button_cursor | 指定鼠標懸停在Flash按鈕上時的光標樣式,可用值爲SWFUpload.CURSOR裏定義的常量 | ||
button_window_mode | 指定Flash按鈕的WMODE屬性,可用值爲SWFUpload.WINDOW_MODE裏定義的常量 | ||
file_dialog_start_handler | Function | fileDialogStart事件偵聽函數 | |
file_queued_handler | Function | fileQueued事件偵聽函數 | |
file_queue_error_handler | Function | fileQueueError事件偵聽函數 | |
file_dialog_complete_handler | Function | fileDialogComplete事件偵聽函數 | |
upload_start_handler | Function | uploadStart事件偵聽函數 | |
upload_progress_handler | Function | uploadProgress事件偵聽函數 | |
upload_error_handler | Function | uploadError事件偵聽函數 | |
upload_success_handler | Function | uploadSuccess事件偵聽函數 | |
upload_complete_handler | Function | uploadComplete事件偵聽函數 |
源碼說明:
public class siteconfig { public int attachfilesize{ get; set;}//附件文件大小 public int attachimgsize { get; set; }//附件圖片大小 public int attachimgmaxheight{ get; set;}//附件圖片最大高度 public int attachimgmaxwidth { get; set; }//附件圖片最大寬度 public int thumbnailwidth { get; set; }//縮略圖寬度 public int thumbnailheight { get; set; }//縮略圖寬度 public int watermarktype { get; set; }//水印類型1文件2圖片 public string watermarktext { get; set; }//水印文字 public int watermarkimgquality { get; set; }//水印質量 public string watermarkpic { get; set; }//水印圖片名稱 public string webpath { get; set; }//web目錄 public string attachpath { get; set; }//上傳文件夾 public int watermarkposition { get;set;}//水印位置 public string watermarkfont { get; set; }//水印字體 public int watermarkfontsize { get; set; }//水印字體大小 public int watermarktransparency { get; set; }//透明度 public int attachsave { get; set; }//保存的類型按年月/日存入不一樣的文件夾/按年月日天天一個文件夾 public string attachextension { get; set; }//容許的擴展名 }
下載例子源碼 VS2012+MVC4
https://yunpan.cn/cZVeSJ33XSHKZ 提取碼 0fc2