我创建了一个简单的表单来上传图片。
它允许在选择后立即预览图像。
它在 Chrome 和 Firefox 中完美运行,但在 IE 中却不行,其中: - 图像预览根本不起作用;- 只有在第二次(提交)按钮单击后才能成功提交表单。
任何想法如何解决它?
您可以在http://jsfiddle.net/renatogil/qFjrE/上看到它的发生
代码是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//PT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Include The jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
//----------------------------------------------------
// img preview
//----------------------------------------------------
//
function readURL(input, pic) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#' + pic)
.attr('src', e.target.result)
.width(120)
.height(120);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>"
enctype="multipart/form-data">
<img id="product_pic" src="img/default_product_pic.jpg" width="120"
height="120" alt="Click to upload..." /><input id="product"
name="product" type="file"
style="visibility: hidden; overflow: hidden; display: none;"
onchange="readURL(this, 'product_pic');"><br> <br> <input
id="add_pic" type="button" value="Add picture">
</div>
<script>$('#product_pic').click(function() { $('#product').click(); });$('#add_pic').click(function() { $('#product').click(); });</script>
<input type="submit" value="Upload" />
</div>
</form>
</body>
</html>