新しいバージョンのブラウザでどのように画像のプレビュー機能を実現しますか?

3746 ワード

JavaScript ブラウザ Security cgi firefox

最近のプロジェクトでは比較的難しい問題に遭遇しました.
比較的新しいバージョンのブラウザ(Firefox 3、 IE 8、IE 7(IE 8シミュレーション)ではfile inputの完全なvalueを取得できません.まずテストの結果を見ます.
Firefox 2.x,IE 6,IE 7
    ローカルおよびリモートの両方で完全なアドレス(パスおよびファイル名を含む)が取得できます.
Firefox 3.0
    はい、
ローカルとリモートは完全なアドレスを取得できません.ファイル名しか取得できません.
IE 8,IE 7(IE 8シミュレーション)
    ローカルでは、パスとファイル名を含む完全なアドレスを取得することができます.
遠端は完全な住所を取得できません.ファイル名しか取得できません.
私たちは上のテスト情報から新しいバージョンのブラウザの中でリモート端末で完全な住所を得ることができませんでした.この問題を解決する方法がありますか?下を見てみます.
どうやってFirefox 3でフルパスを取得しますか?
第一歩:「about:config」ページを開き、「signed.applets.co.debases.uplricpaluport」属性を検索して、その値をtrueに設定します.
ステップ2: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;
}

どのようにIE 8の下で完全なパスを取得しますか?
方法1:セレクションを使う.

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

方法二:引用:
https://bugzilla.mozilla.org/attachment.cgi?id=328849
上で問題が発生しているのを見ましたが、安全性を考慮したものかもしれません.新しいバージョンのブラウザはクライアントのコンテンツにアクセスする権限が高く設定されています.現在は形を変えた「解決策」がありますが、いずれもユーザーがページにアクセスする時、ブラウザのセキュリティ設定を追加する必要があります.そうでないと、Javascriptだけではまだ直接アクセスできません.これは前のように直接file inputのvalueを呼び出して画像のプレビューを行うことができないという意味です.
私たちは他に何か写真のプレビューをする方法がありますか?続きを見る
新しいバージョンのブラウザでは、nsIDOMFileというインターフェースが提供されています.3つの方法が使用可能です.それぞれ:
        * DOMString getAsBinary()
        * DOMString getAsData URL();
        * DOMString getAs Text(in DOMString encoding);
詳細はこちらをご覧ください.
https://developer.mozilla.org/en/NsIDOMFile
私達はこの方法でget Asta URLを使います.この方法は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>

このように、私たちは新しいバージョンのブラウザで画像のプレビューを行うことができます.もっといい方法があれば、一緒に共有してもいいです.
注意:ie 7ではimg.srcという方式で画像のプレビューができません.フィルターを使って実現します.

hihocoder〓〓1178:暴力を計数します.