由於Chome不再提供Flash上傳支持
自2020-07起,本文和框架的多文件上傳已由新版H5上傳替代(所以本文請不再作為參考意義)
新版H5多文件上傳
新版H5單文件上傳
文件上傳這東西說到底有時候很痛,原來的asp.net服務器控件提供了很簡單的上傳,但是有回傳,還沒有進度條提示。這次我們演示利用swfupload多文件上傳,項目上文件上傳是比不可少的,大家這個心里都知道。主要提供給源碼說明及下載
最終效果圖:

SWFUpload的特點:
1、用flash進行上傳,頁面無刷新,且可自定義Flash按鈕的樣式;
2、可以在瀏覽器端就對要上傳的文件進行限制;
3、允許一次上傳多個文件,但會有一個上傳隊列,隊列里文件的上傳是逐個進行的,服務器端接收文件時跟普通的表單上傳文件是一樣的;
4、提供了豐富的事件接口供開發者使用;
SWFUpload的文件上傳流程是這樣的:
1、引入相應的js文件
2、實例化SWFUpload對象,傳入一個配置參數對象進行各方面的配置。
3、點擊SWFUpload提供的Flash按鈕,彈出文件選取窗口選擇要上傳的文件;
4、文件選取完成后符合規定的文件會被添加到上傳的隊列里;
5、調用startUpload方法讓隊列里文件開始上傳;
6、文件上傳過程中會觸發相應的事件,開發者利用這些事件來更新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

新版H5多文件上傳
新版H5單文件上傳