IE8以下不能預覽本機圖片最新解決辦法

該問題直接用代碼比較直觀:

1.假設頁面如此

<div>
		<div class="upload-face-panel btnbgim"> 
			<input id="imageFile" name="imageFile" type="file"/>
			<div class="upload-face">
				<span class="icon"></span>
				<span class="info"><a href="javascript:void(0)">選擇您要上傳的頭像</a></span>
			</div>
		</div>
	</div>
	<div>
		<div class="ui-whitespaces">
			<p class="ui-txt-muted">僅支持JPG,JPEG,PNG格式</p>
		</div>
	</div>
	<div class="ui-form-lable">
		<div class="ui-lable-div" id='bigImg'></div>
		<div class="ui-effect">
			<h3 class="ui-margin-h3">效果預覽</h3>
			<div class="ui-form-div preview" id='smallImg'></div>
			<div class="ui-whitespaces">
				<p class="ui-txt-muted">80 * 80像素</p>
			</div>
		</div>
	</div>

2在file輸入框綁定change事件: 

$("#imageFile").on('change', changeFace());// 圖像上傳

3.具體方法如下:IE8以下通過濾鏡效果,另外不通瀏覽器獲取本地圖片絕對路徑方法是不一樣的,因爲瀏覽器的保護機制。這個想了解得自己研究。

/**圖像上傳預覽*/ 
		    changeFace : function() {
			var file = $("#imageFile");//選擇的文件
			var imgSrc = $(this)[0].value;
			if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
				imgSrc = "";
				alert("圖片格式不正確!");
				return;
			} 
			if(window.FileReader){//chrome,firefox7+,opera,IE10+
				var file = $(this)[0].files[0];
				urlAdr = URL.createObjectURL(file);
				$("#bigImg").html("<img class='img-padding' id='preview'>");
				$("#smallImg").html("<img class='img-padding1' id='preview1'>");
				$("#preview").attr("src", urlAdr);;//預覽大圖
			    $("#preview1").attr("src", urlAdr);;//預覽小圖   
	        }else if (file.files) {//firefox6-
	            if (file.files.item(0)) {
	            	urlAdr = file.files.item(0).getAsDataURL();
	            };
	        	$("#bigImg").html("<img class='img-padding' id='preview'>");
				$("#smallImg").html("<img class='img-padding1' id='preview1'>");
				$("#preview").attr("src", urlAdr);;//預覽大圖
			    $("#preview1").attr("src", urlAdr);;//預覽小圖 
	        }else{//IE9、IE8
	        	urlAdr = imgSrc;
	        	$("#bigImg").attr('style', "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:260px;height:260px; text-align:center");
	        	$("#smallImg").attr('style', "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:80px;height:80px; text-align:center");
	        	document.getElementById("bigImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
	        	document.getElementById("smallImg").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            }
		}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章