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

最新推荐文章于 2019-08-09 18:21:55 发布

frost82

最新推荐文章于 2019-08-09 18:21:55 发布

阅读量100

点赞数

分类专栏： Javascript 文章标签：浏览器 JavaScript Firefox Security CGI ViewUI

Javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

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

Firefox 3.0
在[color=red]本地及远端都不能[/color]取得完整地址，只能获得文件名

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

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

[b][color=red]如何在Firefox3下取得完整路径[/color][/b]

第一步：打开“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;
}

[b][color=red]如何在IE8下取得完整路径[/color][/b]

方法一：使用selection.createRange


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

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

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

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

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

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

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

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

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


<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New file input tester.</title>
</head>
<body>
<input id="myfile" type="file" />
<br />
<img src="" alt="Image to be upload." />
<div id="info"></div>
<script type="text/javascript">
var dFile = document.getElementById('myfile');
var dImg = document.getElementsByTagName('img')[0];
var dInfo = document.getElementById('info');
dFile.onchange = function(){
	if(!dFile.value.match(/.jpg|.gif|.png|.bmp/i)){alert('File type must be: .jpg, .gif, .bmp or .png !');return;}
	if(dFile.files){
		dImg.src = dFile.files[0].getAsDataURL();
	}else if(dFile.value.indexOf('\\') > -1 || dFile.value.indexOf('\/') > -1){
		dImg.src = dFile.value;
	}
}
</script>
</body>
</html>

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

[b][color=red]注意：在ie7下不能使用img.src這樣的方式來進行圖片預覽，需要使用濾鏡實現！[/color][/b]

frost82

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新版本瀏覽器中如何實現圖片預覽功能

最近在项目中遇到一个比较棘手的问题：在较新版本的浏览器 ( Firefox3, IE8, IE7(IE8模拟) ) 中无法获取file input的完整value，我們先看下測試的結果。Firefox 2.x, IE6, IE7 在本地及远端都可以取得完整地址（包括路径及文件名）Firefox 3.0 在[color=red]本地及远端都不能[/color...
复制链接

扫一扫