ホームページ >ウェブフロントエンド >jsチュートリアル >画像 js をアップロードして、IE_javascript スキルと互換性のある画像のサイズと形式を決定します
js コード:
$(".head").change(function() { var val = $(this).val(); if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){ imgtype = false; alert('图片格式无效!'); }else{ if (FileReader) { var reader = new FileReader(), file = this.files[0]; reader.onload = function(e) { var image = new Image(); image.src = e.target.result; image.onload=function(){ if(image.width > 128 || image.height > 128){ fill = false; alert("头像尺寸应在128x128之间"); } } }; reader.readAsDataURL(file); }else{ //这是ie9版本 $(".preview_size_fake").show(); var objPreviewSizeFake = $(".preview_size_fake").get(0); var fileupload = $(this).get(0); fileupload.select(); fileupload.blur(); path = document.selection.createRange().text; if (/"\w\W"/.test(path)) { path = path.slice(1,-1); } objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path; if(objPreviewSizeFake.offsetWidth > 128 || objPreviewSizeFake.offsetHeight > 128){ fill = false; alert("头像尺寸应在128x128之间"); } document.selection.empty(); } } });
CSS コード (これは必ず記述する必要があります。書かないと IE では動作しません)
.preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); height: 1px; visibility:hidden; overflow: hidden; display: none; }
HTML コード:
<input class="head" type="file" name="avatar"> <img class="preview_size_fake" />