jquery.uploadify上傳文件配置詳解(asp.net mvc)

時間 2019-12-13

標籤 jquery.uploadify jquery uploadify 上傳文件配置詳解 asp.net asp mvc 欄目 JQuery 简体版

原文原文鏈接

頁面源碼：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery upload上傳文件(asp.net mvc)配置</title>
    <script src="Resources/jquery.js"></script>
    <script src="Resources/uploadify/jquery.uploadify.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#file-upload").uploadify({
                auto: true, // 選擇文件後是否自動上傳，默認值：true
                height: 30, // 按鈕高度
                swf: '/Resources/uploadify/uploadify.swf', // flash文件路徑
                uploader: '/home/UploadFile', // 服務器上傳地址
                width: 120, // 按鈕寬度
                buttonText: "選擇文件", // 按鈕顯示文本， 默認值：Select File
                fileObjName: "uploadFileName", // 服務器接收文件名， 默認值：FileData
                buttonClass: "custom-css", // 自定義按鈕類樣式(追加), 默認值：空
                buttonCursor: "arrow", // 鼠標樣式， 默認值：hand
                buttonImage: null, // 按鈕背景圖片
                checkExisting: false, // 若是爲true, 服務器應該提供接口用於檢查即將上傳的文件是否已存在服務端，
                debug: true, // 設置SWFUpload爲debug模式
                fileSizeLimit: 0, //上傳文件大小限制：0無限制， 默認單位KB， 可設置成字符串如：1024MB
                fileTypeDesc: "圖片文件", // 選擇框圖片選擇描述， 默認值 All Files
                fileTypeExts: "*.jpg;*.gif;*.png;*.bmp;*.rar", // 選擇文件後綴名過濾， 默認值*.*即全部文件。 多個後綴名採用;隔開
                formData: { parameter1: "value1", parameter2: "value2" }, // 每一個文件上傳 附加的參數（json類型）， 默認值：空
                itemTemplate: false, //上傳文件隊列的列表模板,
                method: "post", // 提交方式，GET|POST
                multi: true, // 是否支持多個文件上傳
                preventCaching: false, //  阻止緩存
                progressData: "percentage", // 進度條顯示狀況，percentage|speed
                queueSizeLimit: 999,    // 每次選擇上傳文件隊列的總數大小， 默認值：999
                removeCompleted: true,  // 文件上傳成功後移出隊列， 默認值：true
                removeTimeout: 3,    // 文件上傳成功後延遲幾秒移出隊列, 默認值：3
                requeueErrors: false,    //  當文件上傳發生錯誤時，若是爲true上傳動做會重複操做
                uploadLimit: 999,   // 上傳文件的數量最大值，默認值：999
                onCancel: function (fileObj) {   // 當上傳文件從隊列移出觸發
                    console.dir(arguments);
                },
                onClearQueue: function (queueItemCount) {   // 當執行清除隊列是觸發，如$('#file-upload').uploadify('cancel','*')
                    console.dir(arguments);
                },
                onDestroy: function () {     // 當銷燬SWFUpload是觸發
                    console.log("uploadify已被銷燬!");
                },
                onDialogClose: function (queueData) {   // 當選擇文件對話框關閉時觸發
                    console.dir(arguments);
                },
                onDialogOpen: function () {     // 當選擇文件對話框打開時觸發
                    console.dir(arguments);
                },
                onDisable: function () {     // 當調用disable方法時觸發， 如：$('#file-upload').uploadify('disable', true);
                    console.log("uploadify已被禁用!");
                },
                onEnable: function () {     // 當調用disable方法時觸發， 如：$('#file-upload').uploadify('disable', true);
                    console.log("uploadify已被開啓!");
                },
                onFallback: function () {       // Flash版本兼容錯誤 觸發
                    console.log("Flash不兼容!");
                },
                onInit: function (instance) {   //  初始化時觸發
                    console.dir(arguments);
                },
                onQueueComplete: function (queueData) {     // 當隊列中全部文件都執行完時 觸發
                    console.dir(arguments);
                },
                onSelect: function (fileObj) {      // 當每個選中的文件添加到上傳隊列時觸發
                    console.dir(arguments);
                },
                onSelectError: function (file, errorCode, errorMsg) {    // 當每個選中的文件添加到上傳隊列報錯時觸發
                    console.dir(arguments);
                },
                onSWFReady: function () {     // 當swf加載完畢和準備就緒時觸發
                    console.log("swf已初始化!");
                },
                onUploadComplete: function (fileObj) {   // 當隊列中每個文件上傳操做執行完成時觸發，無論上傳成功仍是失敗
                    console.dir(arguments);
                },
                onUploadError: function (fileObj, errorCode, errorMsg, errorString) {       // 當隊列中每個文件上傳失敗時 觸發
                    console.dir(arguments);
                },
                onUploadProgress: function (fileObj, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  // 隊列中每個文件上傳進度事件
                    console.dir(arguments);
                },
                onUploadStart: function (fileObj) {      // 當隊列中每個文件上傳開始時觸發
                    console.dir(arguments);
                },
                onUploadSuccess: function (fileObj, data, response) {       // 當隊列中每個文件上傳成功時觸發
                    console.dir(arguments);
                }
            });
            /**
             *方法
             */
            //$('#file-upload').uploadify('cancel');  // 從隊列中移出第一 
            //$('#file-upload').uploadify('cancel', "*");  // 清空隊列
            //$('#file-upload').uploadify('destroy');     // 銷燬
            //$('#file-upload').uploadify('disable', true);   // 禁用|開啓
            //$('#file-upload').uploadify('setting', "name", "value");    // 設置|獲取uploadify配置
            //$('#file-upload').uploadify('stop');    // 中止
            //$('#file-upload').uploadify('upload')     // 啓動上傳
        });
    </script>
</head>
<body>
    <input type="file" name="fileName" id="file-upload" />
</body>
</html>

後臺程序與webconfig配置：

<system.web>
    <httpRuntime executionTimeout="300" maxRequestLength="10240" />   <!--限制最大10MB-->
</system.web>

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult UploadFile()
    {
        HttpPostedFileBase postedFile = Request.Files["uploadFileName"]; // 上傳文件名須一致
        if (postedFile != null)
        {
            string filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, string.Format("{0}{1}", DateTime.Now.ToString("yyyyMMddHHmmsss"), Path.GetExtension(postedFile.FileName)));
            using (Stream streamReader = postedFile.InputStream)
            {
                byte[] buffer = new byte[1024];
                using (FileStream streamWriter = new FileStream(filePath, FileMode.Create, FileAccess.Write))
                {
                    int read = streamReader.Read(buffer, 0, buffer.Length);
                    while (read > 0)
                    {
                        streamWriter.Write(buffer, 0, buffer.Length);
                        read = streamReader.Read(buffer, 0, buffer.Length);
                    }
                    streamWriter.Flush();
                    streamWriter.Close();
                    streamWriter.Dispose();
                    streamReader.Flush();
                    streamReader.Close();
                    streamReader.Dispose();
                    return Content("1");
                }
            }
        }
        return Content("0");
    }
}