Html5 FileReader でインスタント画像アップロード機能を実装するサンプルコード_html5 チュートリアル スキル

以下はie9で実装したプレビューです。ie8とはまだ違いますが、ie8でもfiter関数が使えるようなのでie8のバージョンは書きませんでした。 >

コードをコピーしますコードは次のとおりです:

>

/head>

#kk{
高さ:400px; 🎜>オーバーフロー: 非表示
}
#preview_wrapper{
幅:300px;
背景色:#CCC; }
#review_fake{ /* このオブジェクトは IE でプレビュー画像を表示するために使用されます*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:300px; : hidden;
}
#preview_size_fake{ /* このオブジェクトは IE で画像の元のサイズを取得するためにのみ使用され、他の用途はありません*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=image);
width:300px;
overflow: hidden;
}
#preview{ /* このオブジェクトは FF* /
幅:300px;
高さ:300px;
オーバーフロー:
onUploadImgChange(sender){
if ( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
alert('画像形式が無効です! ');
return false;
}
var objPreview = document.getElementById('preview');
var objPreviewFake = document.getElementById('preview_fake'); .getElementById('preview_size_fake');
if( sender.files && sender.files[0] ){ //ここで chrome と ff が互換性があります
objPreview.style.display = 'block'; >objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// セキュリティの問題により、Firefox は input[file] を通じて完全なファイルを直接取得できなくなりました。 .value Path
objPreview.src = sender.files[0].getAsDataURL();
}else if( objPreviewFake.filters ){
// ローカル画像アドレスを img に設定すると IE7、IE8 が表示されます.src 不可解な結果
//(同じ環境が表示される場合もあれば、表示されない場合もある)、フィルターでのみ解決可能
// IE7 と IE8 はセキュリティの問題により、input[file].value を直接渡すことができません完全なファイル パスを取得します。
sender.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform) .Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
alert("画像が正常に選択されました!"); (objPreviewSizeFake.offsetWidth);
autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
objPreview.style.display = 'none';
関数 onPreviewLoad( ){
autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}
function autoSizePreview( objPre,originalWidth,originalHeight ){
varzoomParam = clacImgZoomParam( 300, 300,originalWidth,originalHeight) );
objPre.style.width =zoomParam.width 'px';
objPre.style.height =zoomParam.height 'px';
objPre.style.marginLeft =zoomParam.left 'px';
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = { width:width, height:height ,上:0、左:0 };
if(幅>maxWidth || 高さ>maxHeight ){
rateHeight = height / maxHeight; rateHeight ){
param.width = maxWidth;
param.height = height / rateWidth;
param.width = width / rateHeight; 🎜>}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2; }
画像をプレビューするために使用されます。

🎜 >