jquery文件上傳控件 Uploadify 問題記錄

Uploadify v3.2.1

 

 

首先引用下面的文件

<!--上傳控件 uploadify-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link href="~/uploadify/uploadify.css" rel="stylesheet" />
<script src="~/uploadify/jquery.uploadify.js"></script>

 

 

 

                              <div class="col-md-10">
                                <p>
                                    <!--記錄地址-->
                                    <input type="text" name="UR_Icon" id="UR_Icon" class="form-control" value="@Model.xxxx" />
                                </p>
                                <!--顯示縮略圖-->
                                <img id="showImage" />
                                <!--uploadify插件-->
                                <input type="file" name="file_upload" id="uploadify" />
                                <p>
                                    <button type="button" class="btn btn-default" id="upload">上傳</button>
                                    <button type="button" class="btn btn-default" id="cancel">取消上傳</button>
                                </p>
                            </div>

 

 

 

<script type="text/javascript">
    $('#uploadify').uploadify({
        uploader: '/FileUpLoad/UpLoadProcess',           // 服務器端處理地址
        swf: '/uploadify/uploadify.swf',    // 上傳使用的 Flash

        width: 90,                          // 按鈕的寬度
        height: 33,                         // 按鈕的高度
        buttonText: "選擇圖片",                 // 按鈕上的文字
        buttonCursor: 'hand',                // 按鈕的鼠標圖標

        fileObjName: 'Filedata',            // 上傳參數名稱

        // 兩個配套使用
        fileTypeExts: "*.jpg;*.png;*.gif",             // 擴展名
        fileTypeDesc: "請選擇 jpg png gif 文件",     // 文件說明

        auto: false,                // 選擇之后，自動開始上傳
        multi: false,               // 是否支持同時上傳多個文件
        queueSizeLimit: 1,          // 允許多文件上傳的時候，同時上傳文件的個數

        'itemTemplate': '<div id="${fileID}" class="uploadify-queue-item">\
                    <div class="cancel">\
                        <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\
                    </div>\
                    <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\<div class="uploadify-progress"><div class="uploadify-progress-bar"><!--Progress Bar--></div></div>\
                </div>',
        //從服務器端腳本返回數據
        'onUploadSuccess': function (file, data, response) {
            //設置縮略圖的寬高
            $('#showImage').attr('src', data).attr('style', 'width:90px;height:90px');
            //給【input】 UR_Icon 控件賦值
            $('#UR_Icon').val(data);
            //alert('id: ' + file.id
            //            + ' - 索引: ' + file.index
            //            + ' - 文件名: ' + file.name
            //            + ' - 文件大小: ' + file.size
            //            + ' - 類型: ' + file.type
            //            + ' - 創建日期: ' + file.creationdate
            //            + ' - 修改日期: ' + file.modificationdate
            //            + ' - 文件狀態: ' + file.filestatus
            //            + ' - 服務器端消息: ' + data
            //            + ' - 是否上傳成功: ' + response);

        }
    });

    //上傳開始
    $('#upload').on('click', function () {
        $('#uploadify').uploadify('upload', '*')
    })
    //取消上傳
    $('#cancel').on('click', function () {
        $('#uploadify').uploadify('cancel', '*')
    })

</script>

 

 

服務器

public ActionResult UpLoadProcess(HttpPostedFileBase Filedata)
        {
            string now = DateTime.Now.ToString("yyyy-MM-dd");
            string upLoad = "UpLoad";

            // 如果沒有上傳文件
            if (Filedata == null ||
                string.IsNullOrEmpty(Filedata.FileName) ||
                Filedata.ContentLength == 0)
            {
                return this.HttpNotFound();
            }

            //獲取文件的保存路徑
            string uploadPath = Server.MapPath("\\" + upLoad + "\\" + now);
            //判斷上傳的文件是否為空
            if (Filedata != null)
            {
                //如果沒有UpLoad這個文件夾
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }


            }

            // 保存到 ~/UpLoad 文件夾中，名稱不變
            string filename = Guid.NewGuid().ToString("N") + Path.GetExtension(Filedata.FileName);
            string virtualPath =
                string.Format("/" + upLoad + "/{0}/{1}", now, filename);
            // 文件系統不能使用虛擬路徑
            string path = this.Server.MapPath(virtualPath);

            Filedata.SaveAs(path);

            //返回虛擬路徑
            return Content(virtualPath);
        }

 

 

不同地方，視圖要修改的參數。

 

 

 

 

問題集錦：

1.先點擊【修改窗口】，選擇文件，但是沒有傳就關閉 modal 了。再在【添加】按鈕里面，這個進度條還在？

 

 

順帶把img的地址清楚掉。

 

2.添加按鈕和修改按鈕的邏輯問題，自己看注釋

//添加
    $('#mytool').on('click', 'button#addModel', function () {

        //加載頁面基本信息
        $.ajax({
            url: "/AdminUser/AdminUserForm",
            type: "post",
            //參數：（html5:MenuForm頁面html數據）
            success: function (html5) {
                //只有在沒賦值的情況下，才創建
                if ($("#createModal").html() == "") {

                    $("#createModal").html(html5);
                    
                    //彈出框show
                    $("#myModal").modal("show");
                } else {
                    //點“添加”，清除掉進度條
                    $('#uploadify-queue').html('');

                    //重置添加 modal 里面的 input 的值為 null
                    $("#formMenu input[type='text']").val('');
                    //讓select 選擇 +<option selected="selected" value="-1">請選擇一項數據！</option>
                    $("#formMenu select").val('-1'); 
                }
                //重置添加 modal 里面的 img 的值為 默認圖片
                $('#showImage').attr('src', 'UpLoad/image.png').attr('style', 'width:200px;height:150px');
            }
        });
    })



    /**
    *  編輯
    */
    $('#dataTables-example tbody').on('click', 'button#editrow', function () {
        //當前行數據
        var rows = tables.row($(this).parents('tr')).data();
        //加載頁面基本信息
        $.ajax({
            url: "/AdminUser/AdminUserForm",
            type: "post",
            data: rows,
            success: function (data) {
                var exp = rows.UR_Icon;

                //只有在沒賦值的情況下，才創建
                $("#createModal").html(data);
                //縮略圖賦值
                $('#showImage').attr('src', $('#UR_Icon').val()).attr('style', 'width:200px;height:150px');
                //彈出框show
                $("#myModal").modal("show");


                //必須先賦值，才能修改縮略圖
                if (exp == null || typeof (exp) == "undefined" || exp == 0) {
                    //重置添加 modal 里面的 img 的值為 null(去掉圖片縮略圖)
                    $('#showImage').attr('src', 'UpLoad/image.png');
                }
            }
        });

    });

 

 

3.uploadify “ID SWFUpload_0 is already in use. The Flash Object could not be added”錯誤的解決方法

 

在使用 uploadify時 遇到同時加載的多個頁面中包含uploadify組件時就會出現“ID SWFUpload_0 is already in use. The Flash Object could not be added”的錯誤，分析代碼就會發現，時因為名字累加的問題，解決方法如下，

找到this.movieName，第72行 （jquery.uploadify.js）

this.movieName = "SWFUpload_" + SWFUpload.movieCount++;   //不能有效累加導致出現重名現象 

修改為隨機   this.movieName = "SWFUpload_" + 

parseInt(100*Math.random());

注意：同時，<input type="file" name="file_upload" id="uploadify001" />

命名不能相同，這個要注意

 

 

4.“編輯”按鈕，加載不出圖片

 

 

 

解決方案：

 

參考：

http://www.cnblogs.com/haogj/archive/2013/04/27/3046138.html

 

http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html

 

http://www.buyuer.com/javaScript/61.html   SWFUpload_0 is already in use. The Flash Object could not be added