Inputタイプがfileの場合、chrome、FF、IE 8のfakepath問題の処理方法

フォームを処理するとき、inputタイプがfileの場合、FF、chrome、IE 8がファイルを取得する場合、または本物のファイルアドレスではなくfakepathが取得されます.しかしie 6,ie 7は取得でき,IE 8以降はセキュリティレベルが向上した.しかし、クライアントの画像プレビューのようなニーズが発生すると、異なるブラウザには不要なポリシーが採用されます.IEは、フィルタ、chromeなどHTML 5が使える方式で、具体的には以下の通りです.

<img id="file_img"  src="http://xx" width="100" height="100"/> 

<script type="text/javascript">

var getPath=function(obj){

			obj.select();

            var path=document.selection.createRange().text;

			obj.removeAttribute("src");

			obj.style.filter=   

            "alpha(opacity=0);progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');";  

			}

</script>

このように、フィルタによってpathが得られますが、フィルタを使用すると、画像の左上隅に小さなアイコンが表示されます.これは、フィルタとして透明な画像を迂回してfile_として使用することができます.imgのsrcは、このsrcを占有し、小さなピクチャが透明に表示されるようにする.FFについては、getAsDataURLメソッドを使用して取得する方法が長い間ネット上に出回っています.例えば、次のような方法があります.

function getFullPath(obj){

    if(obj){

        if (window.navigator.userAgent.indexOf("MSIE")>=1){

            obj.select();

            return document.selection.createRange().text;

        }

        else if(window.navigator.userAgent.indexOf("Firefox")>=1){

            if(obj.files){

				return obj.files.item(0).getAsDataURL();

			}

            return obj.value;

        }

		return obj.value;

    }

}

ただし、html 5の方法を使用してFFを互換化することができ、HTML 5 File APIでは、さまざまな方法でファイルを読み込むことができ、ファイルの読み取り中の各状態をリスニングして処理することができるBlobReaderを定義しています.しかし、FirefoxとChromeの実装では、このようなBlobReaderはなく、代わりにFileReaderであり、BlobReaderと同じ方法とイベントを持っている.
例:

function getPath(obj,fileQuery){

		var file =fileQuery.files[0];  

		var reader = new FileReader();  

		reader.onload = function(e){

			obj.setAttribute("src",e.target.result)

		}

		reader.readAsDataURL(file);  

}

chromeの解決策もFFと同様にFileReaderオブジェクトを使用して実現され、次に完全に互換性のあるバージョンが必要です.

/*fileQuery  input type file   ，      this   ，

  :obj.onChange=function(){

		var file_img=document.getElementById("img");

		getPath(file_img,this,transImg);

	} 

transImg   IE               ;*/

var getPath=function(obj,fileQuery,transImg){

		if(window.navigator.userAgent.indexOf("MSIE")>=1){

			obj.select();

			var path=document.selection.createRange().text;

			obj.removeAttribute("src");

			obj.setAttribute("src",transImg);

			obj.style.filter=   

			"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');";  

		}

		else{

			var file =fileQuery.files[0];  

			var reader = new FileReader();  

			reader.onload = function(e){

				obj.setAttribute("src",e.target.result)

			}

			reader.readAsDataURL(file);  

		}

	}

もちろん、JSの方法でイライラするかもしれませんが、代替案1、falshの方法として以下の2つを使用することができます.falshの方法を採用するのも適切で、互換性のないトラブルです.2、サーバーを先进して、それからサーバーから読み出します;html5