新版浏览器实现图片预览的方法

海鸟搜索：华人超市 中餐馆大全 海外留学的悲催事 最近在项目中遇到一个比较棘手的问题：在较新版本的浏览器（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，它的内容就是文件经过编码后的数据了。

好，下面让我来看下例子吧：

        

这样我们就可以在新版本的浏览器里进行图片的预览了，如果你有更好的方法也可以共同分享一下。