我正在尝试动态上传和预览图像。它在 mozilla Firefox、IE 9 和 IE10 上运行良好。
但在 IE7 和 IE8 中图像无法显示。请帮我解决这个问题。我的完整代码如下。
HTML 标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Files Uploading</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<form name="upload_images" id="upload_images" enctype="multipart/form-data" method="post">
<table border="0" cellpadding="5" cellspacing="0" id="imageTable">
<tr>
<td>
<input type="file" value="Browse File" name="photo_0" id="photo_0" onchange="showPreview(this,'0')" />
</td>
<td>
<img id="img_display_0" width="50" height="50" src="images/default.png" border="0"
alt=""></td>
<td>
<img src="images/delete-icon.png" width="25" height="25" alt="" border="0" onclick="deleteRow(this)" />
</td>
</tr>
</table>
<input type="button" name="submit" value="SAVE" />
</form>
</body>
</html>
我使用的脚本是:
$(document).ready(function () {
$('#photo_0').attr('value', '');
});
var images_count = 10;
var thumb_image_width = 50;
var thumb_image_height = 50;
count = 1;
function showPreview(ele, thumbimg_id) {
var image_preview = '#img_display_' + thumbimg_id;
$(image_preview).attr('src', ele.value); // for IE
if (ele.files && ele.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(image_preview).attr('src', e.target.result);
$(image_preview).attr('width', thumb_image_width);
$(image_preview).attr('height', thumb_image_height);
$('.displaynone').show();
}
reader.readAsDataURL(ele.files[0]);
}
var table = document.getElementById('imageTable');
var rowCount = table.rows.length;
var thumbimg_id = "img_display_" + count;
var photo_id = "photo_" + count;
var chk_thumbimg_id = "#img_display_" + (count - 1);
if ($(chk_thumbimg_id).attr('src') != 'images/default.png') {
if (images_count > rowCount) {
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var functionname = "OnChange='showPreview(this,\"" + count + "\")'";
var inputtype_image = "<input type='file' value='Browse File' name='" + photo_id + "' id='" + photo_id + "' " + functionname + " />";
cell0.innerHTML = inputtype_image;
var cell1 = row.insertCell(1);
var thumbnail = "<img id='" + thumbimg_id + "' name='" + thumbimg_id + "' width='50' height='50' src='images/default.png' border='0' alt=''>";
cell1.innerHTML = thumbnail;
var cell2 = row.insertCell(2);
var thumbnail = "<img width='25' height='25' src='images/delete-icon.png' border='0' alt='' onclick='deleteRow(this)'>";
cell2.innerHTML = thumbnail;
count = count + 1;
}
}
}
function deleteRow(btndel) {
var table = document.getElementById('imageTable');
var rowCount = table.rows.length;
if (rowCount > 1) {
if (typeof (btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
else {
alert(" Cant Delete First Row...");
}
}
最佳答案
关于javascript - IE7、IE8下图片文件上传及预览问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21156664/