如何通過ie9或ie8中的javascript讀取本地圖像文件？

Question

我想通過ie9或ie8中的java腳本讀取本地文件圖片。 那可能嗎？

我只是想讀取對象並顯示它，我發現ie8和ie9部分支持

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI
AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1
I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA
AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D">

我想讀取二進制文件並將其轉換為上面的表單字符串。 通過這種方式，我可以顯示本地圖片。

我只想要支持ie8和ie9。 我已經完成了ff部分，客戶希望支持ie8和ie9

Answer 1

是的你可以（因為我不知道會有什么奇怪的人會說）...是的你可以使用FSO / OpenTextFile通過ActiveX在Internet Explorer中使用Javascript讀取和編寫二進制文件。 實際上，我甚至編寫了一個Javascript“ Fichier ”（我是法語）類，它允許Internet Explorer以各種模式打開本地文件，包括直接訪問模式，提供Seek（位置），Read（numberOfBytes），Write（string） ，並根據需要保存更改。

例如，它還可以將整個文件加載到字符串中並將其轉換為Base-64：這允許直接從本地磁盤加載圖像文件，而不是讓它們被某些Web服務器上載並隨后下載回客戶端：確實不是很奇怪，想到從倫敦西部到倫敦市中心，你有義務先從倫敦西部去格拉斯哥，然后從格拉斯哥回到倫敦市中心嗎？

關鍵是你只需知道一個小秘密 ，沒有它，你將無法將所有字節寫入磁盤，也不能將加載的文件轉換為Base-64。 考慮到以下兩點，我只想告訴你這個秘密：

。 首先，您必須逐字節讀取文件，而不是readAll（）或read（n），其中n> 1。 這樣，在某些情況下，您可以防止瀏覽器關聯多個字節。 所以你將在里面用“objectFile.Read（1）”做一個循環。

。 其次，這是秘密：在ASCII +表的256個字符（擴展到第8位）中，其中27個具有異常行為，這是唯一阻止您操作二進制文件的行為：這27個字符位於該范圍內2個“段落”，即32個字節，從128到159（80h到9Fh），除了5個：129,141,143,144,157：這5個表現正常。 但對於該范圍32的其他27個字節，只要從磁盤讀取它們，就會將它們更改為16位值：例如，歐元符號應該是UTF中的字符128（80h）實際上，它是在文件中寫入的值。 但是在瀏覽器的內存中，只要從磁盤讀取80h字節，就會變為16位值：8364（20ACh）。

要理解這一點，請嘗試以下代碼，假設您可以在“D：\\”目錄上進行編寫，否則請更改代碼以指定瀏覽器有權編寫的另一個目錄。

<script type="text/javascript'>
    fso = new ActiveXObject("Scripting.FileSystemObject");
    oFich = fso.OpenTextFile("d:\\foo.txt", 2, true);
    var c1 = String.fromCharCode(65); // 65 is the ASCII code for "A"
    oFich.write(c1);
    oFich.close();
</script>

執行完該代碼后，您將在磁盤上找到“foo.txt”文件：在您的文本板中打開它，您將看到一個完美的“A”。

現在，在上面的Javascript代碼的第3行，您可以將值“65”替換為任何其他值，例如“66”將在您的foo.txt文件中寫入“B”，“97”將寫入“a”， “55”將寫入“7”等等......但現在，嘗試使用值“128”：它變得令人不快，因為你被瀏覽器侮辱了！ 像這樣：

                    "Incorrect argument or procedure call"

好吧，你想要的只是在文件中寫上“€”符號。 你為什么不能這樣做？ 因為價值128不能像通過FSO那樣書寫。 以及上面提到的其他26個值。 順便說一句，不要斷定它是導致失敗的第8位，因為128是第一個8位數：如果你用160到255之間的任何數字替換128，這也有7位設置，你能夠看到它運作得非常好。

那么，現在試試這個：

fso = new ActiveXObject("Scripting.FileSystemObject");
oFich = fso.OpenTextFile("d:\\foo.txt", 2, true);
var c1 = String.fromCharCode(8364); // 8364  (unicode for "€" symbol ?)
oFich.write(c1);
oFich.close();

您會滿意地注意到執行后沒有更多錯誤消息。 然后，鍵入您的“foo.txt”，您將看到一個漂亮的“€”符號。 但令您驚訝的是，如果您將該文件加載到十六進制“轉儲器”工具中，您將看到代碼不是“AC 20”（8364）而是“80”（128）！

知道了，您現在可以將任何字節串轉換為Base-64或將任何字節串寫入文件，只要您知道將“128”字節寫入磁盤，您就沒有其他方法可以替換它到了8364（20ACh）。 順便問一下，如果你真的想寫8364（20ACh）：但這意味着你的文件是16位值的組合，而不是簡單的字節范圍。 因此，您只需編寫組合該數字的兩個字節，首先寫入低字節：

      oFich.write(String.fromCharCode(172)); // 172 = ACh
      oFich.write(String.fromCharCode(32));  //  32 = 20h   

就你只操作文本而言，你無所事事：“€”在瀏覽器的內存和磁盤上的編寫方式不同，但無論如何它仍然是“€”，所以它是透明的。 但是，如果你為它的數字值加載字節128，那么你就會遇到問題，因為你將得到8364而不是你將從文件中讀取的每128個：這就是為什么許多人在嘗試編碼時失敗的原因在Javascript中使用base-64。

實際上，當您希望它們采用數字值時，您只需要過濾掉27個字符。 這就是為什么我編寫了以下兩個函數，我在我的“ Fichier ”類的某些部分使用它們，在我的Base-64算法中，當我直接從客戶端磁盤加載圖像文件時，或者當我必須將字節操作為數字而不是字符時：

這兩個函數抵消了他們的Javascript模型的部分“ 變態 ”：

                    `String.fromCharcode() and String.charCodeAt()`

由於他們只是封裝了他們的模型，我給了他們經典的基本名稱：“asc”和“chr”，所以他們很容易理解和記憶。 他們來了：

function asc(c) //(string)->integer
{   // Objet : Renvoie le code ASCII du 1er caractère de la chaine "c"
    var i = c.charCodeAt(0);
    if (i < 256)
        return i;       // caractères ordinaires
    // (plage 128-159 excepté les 5 caractères 129,141,143,144,157, qui fonctionnent normalement)
    switch (i) {
        case 8364:      // "€" 
            return 128
        case 8218:
            return 130
        case 402:
            return 131
        case 8222:
            return 132
        case 8230:
            return 133
        case 8224:
            return 134
        case 8225:
            return 135
        case 710:
            return 136
        case 8240:
            return 137
        case 352:
            return 138
        case 8249:
            return 139
        case 338:
            return 140
        case 381:
            return 142
        case 8216:
            return 145
        case 8217:
            return 146
        case 8220:
            return 147
        case 8221:
            return 148
        case 8226:
            return 149
        case 8211:
            return 150
        case 8212:
            return 151
        case 732:
            return 152
        case 8482:
            return 153
        case 353:
            return 154
        case 8250:
            return 155
        case 339:
            return 156
        case 382:
            return 158
        case 376:
            return 159
        default:
            return -1       // provoquera une erreur, le cas ne devant pas se présenter
    }
}
function chr(octet) //->(integer)->string
{   // Objet  : renvoie le caractère d'un nombre 8 bits
    // Entrée : "octet" est un nombre 8 bits non signé (entre 0 et 255)
    // Sortie : le caractère correspondant est renvoyé, les codes échappés sont rattrapés par un switch
    if (octet < 128) || (octet > 159))
        return String.fromCharCode(octet);     // caractères ordinaires, traités par String.fromCharCode
    switch (octet) {
        case 128:
            return "€"
        case 129:
            return String.fromCharCode(129);
        case 130:
            return "‚"
        case 131:
            return "ƒ"
        case 132:
            return "„"
        case 133:
            return "…"
        case 134:
            return "†"
        case 135:
            return "‡"
        case 136:
            return "ˆ"
        case 137:
            return "‰"
        case 138:
            return "Š"
        case 139:
            return "‹"
        case 140:
            return "Œ"
        case 141:
            return String.fromCharCode(141);
        case 142:
            return "Ž"
        case 143:
            return String.fromCharCode(143);
        case 144:
            return String.fromCharCode(144);
        case 145:
            return "‘"
        case 146:
            return "’"
        case 147:
            return "“"
        case 148:
            return "”"
        case 149:
            return "•"
        case 150:
            return "–"
        case 151:
            return "—"
        case 152:
            return "˜"
        case 153:
            return "™"
        case 154:
            return "š"
        case 155:
            return "›"
        case 156:
            return "œ"
        case 157:
            return String.fromCharCode(157);
        case 158:
            return "ž"
        case 159:
            return "Ÿ"
        default:
            return String.fromCharCode(octet);         // unicode 16 bits
    }
}

現在，您可以在允許IE瀏覽文件的磁盤的每個區域上使用ActiveX二進制讀取和寫入任何類型的文件。

正如偉大而錯過的法國幽默家皮埃爾·德斯普羅格曾經說過的那樣：“ Etonnant，不是嗎？ ”

BB。

Answer 2

出於安全原因，JavaScript沒有此功能。

因為我們訪問本地文件系統。 因此，出於安全原因，我們無法在JavaScript中看到文件夾結構或上傳的文件路徑。

Answer 3

擴展David的評論 - MS承諾支持IE10的FileAPI標准。 瀏覽器包的其余部分遠遠領先於HTML5。

對於IE8-9，你可能不得不使用像ActiveX或Flash的SWFObject這樣的插件