我动态上传我的图片。我的代码也应该在 IE9 上运行,在下面的代码中,我只关注 IE9:
<!doctype html>
<html>
<head>
<!-- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
if (navigator.appName === "Microsoft Internet Explorer") {
return function () {
$("#id_image").width(300);
$("#id_image").height(300);
$("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)");
document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
$("#id_image").width(320); // ****** Problematic line
$('#id_image").height(350); // ****** Problematic line
}
}
})();
</script>
<style type="text/css">
</style>
</head>
<body>
<form name="uploadForm">
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
</form>
<img id="id_image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" onmousedown="return false" alt="Your picture"/>
</body>
</html>
为什么我必须在 line: document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value 之前声明 width+height ?
我不能放线(用星号标记:**有问题的线),因为它不会改变宽度+高度。
我怎样才能改变宽度+高度呢?
谢谢 :)