createObjectURLメソッドローカル画像プレビューを実現
10690 ワード
ie 6は、
~~~インターネット上ではie 7がこのファイルシステムパスのurlをサポートしていないと言われていますが、xp ie 8をテストすることはできます.
ie 8+alphaImageLoaderフィルタ方式ローカルパスのピクチャをロード
chrome,firefox,dataUrlまたはcreateObjectURLメソッドで実現
例:
そしてwindowを見てみましょうURL.createObjectURL()とは何か
window.URL.createObjectURL
概要
特定のFileオブジェクトまたはBlobオブジェクトを表すことができる新しいオブジェクトURLを作成する.
構文
例
オブジェクトURLで画像を表示するを参照してください.
ノート冊
ブラウザの互換性
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
8
4
10
12
Nightly build
~~~インターネット上ではie 7がこのファイルシステムパスのurlをサポートしていないと言われていますが、xp ie 8をテストすることはできます.ie 8+alphaImageLoaderフィルタ方式ローカルパスのピクチャをロード
chrome,firefox,dataUrlまたはcreateObjectURLメソッドで実現
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>get file input full path</title>
<script type="text/javascript" language='javascript'>
function getFullPath(obj) {
var newPreview = document.getElementById("img");
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
return;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
newPreview.src = window.URL.createObjectURL(obj.files.item(0));
return;
}
newPreview.src = obj.value;
return;
}
newPreview.src = obj.value;
return;
}
}
</script>
</head>
<body>
<input type="file" onchange="getFullPath(this);" />
<img id="img" alt="" style="width:200px; height:200px;" src=" "/>
</body>
</html>
そしてwindowを見てみましょうURL.createObjectURL()とは何か
window.URL.createObjectURL
概要
特定のFileオブジェクトまたはBlobオブジェクトを表すことができる新しいオブジェクトURLを作成する.
構文
objectURL = window.URL.createObjectURL(blob);
blob は、FileのオブジェクトまたはBlobのオブジェクトである.objectURL 対象URL.このURLにより、指定するファイルの完全な内容を取得することができる.例
オブジェクトURLで画像を表示するを参照してください.
ノート冊
createObjectURL()メソッドが呼び出されるたびに、パラメータ内のこのオブジェクトに独自のオブジェクトURLがある場合でも、新しいオブジェクトURLが作成される.これらのオブジェクトのURLが必要ない場合は、window.URL.revokeObjectURL()メソッドを呼び出すことで、使用するコンテンツを解放する必要があります.アクティブに解放しなくても、ブラウザは現在のドキュメントがアンインストールされている間に解放されますが、より良いパフォーマンスとより少ないメモリ消費量を考慮すると、安全なときにアクティブに解放する必要があります.ブラウザの互換性
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
8
4
10
12
Nightly build