2014年9月29日 星期一

JQuery的套件Uploadify, 無法使用的替代方法

FireFox必須額外安裝flash player才能使用Uploadify套件, 在要使用該套件的情況下, 遇到不能使用該套件的時後, 自行改寫ajax上傳功能 :


// 上傳頭圖 (上傳圖片到資料夾, 不進行存檔到資料庫, 上傳的圖片名稱會經由程式改成和電影名稱一樣
$('#file_upload').uploadify({
    // .... 省略 uploadify 部分的設定 ....
    onSWFReady: function () {
        // 可以使用 uploadify
    },
    onFallback: function () {
        // 無法使用 uploadify
        // console.log('Flash was not detected or flash version is not supported.');
 
        // 新增一個可上傳檔案的 form
        $('#file_upload').after('<form enctype="multipart/form-data" method="post" name="filefox" id="filefox" style="display: initial;">' +
            // 可加入一些必要的數值到 type="hidden" 欄位
            '<input type="file" name="pic" id="pic">' + // 選圖檔案
            '</form>').remove();
        // 選擇圖片後就自動上傳
        $('#pic').change(function () {
            var fd = new FormData($('#filefox')[0]); // your form element, 使用FormData對象發送文件
            // fd.append("CustomField", "This is some extra data"); // 額外添加對象
            $.ajax({
                type: 'POST',
                url: '/upload/test/',
                data: fd,
                // 如果在 Chrome 上顯示下面這個錯誤 
                // Uncaught TypeError: Illegal invocation (未捕獲類型錯誤:非法調用)
                // 指jQuery的AJAX報錯:檢查jQuery的文檔後發現,如果它不是一個字符串,jQuery嘗試將數據轉換成一個字符串。
                processData: false, // 在這裡告訴jQuery不要碰我的數據
                contentType: false, // 防止jQuery來為你添加一個Content-Type頭
                success: function (data) {
                    changeBanner(true);
                }
            });
        });
    }
});

沒有留言: