图片上传前预览

最新推荐文章于 2024-10-05 01:22:45 发布

Andy_Dou

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量125

点赞数

分类专栏： JavaScript jQuery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/Andy_Dou/article/details/84447152

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

<input type="file" />上传前预览图片，不支持IE框架页（frameset，iframe）

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#previewContainer{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var jImgFile = $("#imgFile");
	var pw = "200px";
	var ph = "200px";
	
    jImgFile.change(function() {
    	var fileReader = window.FileReader;
        if (fileReader) {
            var reader = new FileReader();
            var file = this.files[0];
            reader.onload = function(e) {
            	$('#previewContainer').empty();
                $("#previewContainer").append("<img id='imgPreview' src='"+ e.target.result +"' width='"+ pw +"' height='"+ ph +"' />");
            };
            reader.readAsDataURL(file);
        } else {
		//window.navigator.userAgent.indexOf("MSIE") >= 1)
		alert(window.navigator.userAgent);
		$('#previewContainer').empty();
		var pContainer = $("#previewContainer")[0];
		jImgFile[0].select();
		jImgFile[0].blur();
		pContainer.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
		pContainer.style.width = pw;
		pContainer.style.height = ph;
        }
    });
});
</script>
</head>
<body>
<input type="file" name="file" id="imgFile" />
<div id="previewContainer"></div>
<img width="" height=""/>
</body>
</html>