flickr的檔案上傳介面

前些日子開始用flickr
對他的檔案上傳介面感到很好奇

上傳的時候可以顯示進度…是沒什麼問題
一次顯示上傳多檔的進度…js認真點寫應該也不困難
但最讓我搞不懂的是
“選取要上傳的檔案”那個視窗

以html來講,能選擇檔案的只有這個醜不拉嘰的玩意:

按下去之後,一次就只能選取一個檔案

但flickr用的那個可神了
他可以一次選多重檔案,圈選、+shift、+ctrl都可以
甚至還可限制檔案類型,而且還跨瀏覽器

這到底是怎麼辦到的?

把他的js全拉回來看
最後總算找到兇手


// http://l.yimg.com/www.flickr.com/javascript/upload.js.v1.40.10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function createUploadMovie() {
        var j = new SWFObject("/images/upload/yuploadcomponent.swf", "yUpload", 1, 1, 9, "#fff");
        j.addParam("allowScriptAccess", "always");
        j.write("yuploadcontrol");
        if (isIE) {
                window.yUpload = document.getElementById("yUpload");
        }
}
 
 
function uploadrSupported() {
        if (window.location.href.match(/nocheck/i)) {
                return true;
        }
        if (navigator.platform.match(/linux/i)) {
                return {result:false, reason:"unsupported"};
        }
        var j = deconcept.SWFObjectUtil.getPlayerVersion();
        if (document.getElementById && j.major > 0) {
                if (j.major < 9) {
                        return {result:false, reason:"needupgrade"};
                } else {
                        if (j.major == 9 && j.minor == 0 && j.rev == 16) {
                                return {result:false, reason:"badversion"};
                        }
                        if (j.major == 9 && j.minor == 0 && j.rev == 0) {
                                return {result:true};
                        }
                        return {result:true};
                }
        } else {
                return {result:false, reason:"noflash"};
        }
}

原來是flash啊….

在 “flickr的檔案上傳介面” 有 7 則留言

  1. 第一個function是他載入flash用的
    會作出一個沒有介面的flash,flash只傳上傳的部份
    然後把資料和js溝通,js再負責顯示

    第二個function是用來檢查flash的支援
    從這個funciton可以看出,他不支援linux,且flash必需是9版以上的才行

  2. 蝦…. 原來乳齒!

    我前幾天上傳照片也是發現更改後的flickr uploder有變,
    想不到背後是flash作祟阿….真棒!找天來仿效一下~

    不過話說….JS要怎麼認真寫才能顯示讀取進度勒XD

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *