新版本浏览器图片预览功能的实现

最近在项目中遇到一个比较棘手的问题：
在较新版本的浏览器 ( Firefox3,  IE8, IE7(IE8模拟) ) 中无法获取file input的完整value，我們先看下測試的結果。

Firefox 2.x, IE6, IE7
    在本地及远端都可以取得完整地址（包括路径及文件名）

Firefox 3.0
    在本地及远端都不能 取得完整地址，只能获得文件名

IE8, IE7(IE8模拟)
    在本地可以取得完整地址（包括路径及文件名），在远端不能 取得完整地址，只能获得文件名

我們從上面的測試信息中看到在新版本的瀏覽器中在遠端均沒有辦法獲得完整的地址，那有沒有辦法可以解決這個問題呢，我們往下看。

如何在Firefox3下取得完整路径

第一步：打开“about:config”页面，查找“signed.applets.codebase_principal_support”属性，将其值设置为true。

第二步：在javascript中采用以下代码进行获取：

复制内容到剪贴板

代码:

function getValueFF(id){
    var ip = document.getElementById(id);
    if (ip.files) {
        //ffx3 - try to have access to full path
        try {
            netscape.security.PrivilegeManager.enablePrivilege( 'UniversalFileRead' )
        }
        catch (err) {
            //need to set signed.applets.codebase_principal_support to true
        }
    };
    return ip.value;
}

经过以上步骤，在Firefox3下获取file input的value时，会弹出一個Internet Security的对话框，点击“Allow”将可以获取完整value。

如何在IE8下取得完整路径

方法一：使用selection.createRange

复制内容到剪贴板

代码:

function getValueIE8(id){
    var ip = document.getElementById(id);
    ip.select();
    return document.selection.createRange().text;
}

方法二：引用：https://bugzilla.mozilla.org/attachment.cgi?id=328849

在上面我們看到了出現的問題，原因可能是處於對安全性的考量，新版本的瀏覽器對訪問客戶端內容設置了較高的權限。雖然現在有變相的 “解決辦法”，但都需要用戶在訪問頁面的時候，額外的進行瀏覽器的安全設置（允許Javascript腳本訪問更多的本地內容），否則單靠Javascript還是無法直接進行訪問。這就意味這我沒有辦法像以前那樣去直接調用file input的value來進行圖片的預覽。

       那我們是不是有別的什麽辦法來進行圖片的預覽呢？繼續往下看。

       在新版本的瀏覽器中有提供nsIDOMFile這樣一個接口，它提供了三個方法可以使用，分別是：

• 
  
• DOMString getAsBinary();
• DOMString getAsDataURL();
• DOMString getAsText(in DOMString encoding);

       詳細的資料看這裡：https://developer.mozilla.org/en/NsIDOMFile

       我們這裡就是要使用getAsDataURL()這個方法，這個方法會返回一個data: URL類型的DOMString，它的內容就是文件經過編碼后的數據了。

 

转自:http://bbs.blueidea.com/viewthread.php?action=printable&tid=2892627