新版本瀏覽器中如何實現圖片預覽功能

最近在项目中遇到一个比较棘手的问题：
在较新版本的浏览器 ( 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

下面是可以運行的代碼，大家可以看下測試的結果。

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<title>File Input</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
body{font-size:13px;}
.box{border:1px solid #eee;background:#ffe;padding:10px 30px;margin:10px;}
dt{font-weight:bold;}
dt,img,textarea{margin:8px 0;}
em{color:#f00; font-style:normal;}
span{color:#999;}
.ft{color:#999;font-size:11px;text-align:right}
</style>
</head>
<body>
<h2>在不同浏览器中获取File Input的value</h2>
<div class="box">
<input type="file" name="foo" id="foo" size="60" />
<input type="button" value="Show Value" onclick="alert(document.getElementById('foo').value)" />
<input type="button" value="Show Value in FF3" onclick="alert(getValueFF('foo'))" />
<input type="button" value="Show Value in IE8" onclick="alert(getValueIE8('foo'))" />
</div>
<div class="box">
<dl>
<dt>Firefox 2.x, IE6, IE7</dt>
<dd>在本地及远端都可以取得完整地址（包括路径及文件名）</dd>
</dl>
<dl>
<dt>Firefox 3.0</dt>
<dd>在本地及远端都<em>不能</em>取得完整地址，只能获得文件名</dd>
</dl>
<dl>
<dt>IE8, IE7(IE8模拟)</dt>
<dd>在本地可以取得完整地址（包括路径及文件名），在远端<em>不能</em>取得完整地址，只能获得文件名</dd>
</dl>
<span>* 本地：localhost</span>
</div>
<div class="box">
<h3>如何在Firefox3下取得完整路径</h3>
<p>
第一步：打开“about:config”页面，查找“signed.applets.codebase_principal_support”属性，将其值设置为true。
</p>
<p>
第二步：在javascript中采用以下代码进行获取：<br />
<textarea style="width:800px;height:300px;">
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;
}
</textarea>
</p>
<p>
经过以上步骤，在Firefox3下获取file input的value时，会弹出一個Internet Security的对话框，点击“Allow”将可以获取完整value。<br />
<span>资料：<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=143220" target="_blank" >https://bugzilla.mozilla.org/show_bug.cgi?id=143220</a></span>
</p>
</div>
<div class="box">
<h3>如何在IE8下取得完整路径</h3>
<p>方法一：使用selection.createRange <br />
<textarea style="width:800px;height:150px;">
function getValueIE8(id){
var ip = document.getElementById(id);
ip.select();
return document.selection.createRange().text;
}
</textarea>
</p>
<p>方法二：引用：<a href="https://bugzilla.mozilla.org/attachment.cgi?id=328849" target="_blank" >https://bugzilla.mozilla.org/attachment.cgi?id=328849</a></p>
</div>
<script language="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;
}
function getValueIE8(id){
var ip = document.getElementById(id);
ip.select();
return document.selection.createRange().text;
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

在上面我們看到了出現的問題，原因可能是處於對安全性的考量，新版本的瀏覽器對訪問客戶端內容設置了較高的權限。雖然現在有變相的 “解決辦法”，但都需要用戶在訪問頁面的時候，額外的進行瀏覽器的安全設置（允許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，它的內容就是文件經過編碼后的數據了。

   好，下面讓我來看下例子吧

提示：您可以先修改部分代码再运行

這樣我們就可以在新版本的瀏覽器里進行圖片的預覽了，如果你有更好的方法也可以共同分享一下

posted @ 2008-11-11 19:20 supers 阅读(659) 评论(0) 收藏举报

刷新页面返回顶部

歲月足迹...

紀录每一步成長...

新版本瀏覽器中如何實現圖片預覽功能

代码:

代码:

公告