IE7和IE8中的圖像文件上傳和預覽問題
[英]Image files uploading and Preview issue in IE7 and IE8
問題描述
我正在嘗試動態上傳和預覽圖像。 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...");
}
}
1 個解決方案
解決方案1
0
在IE7和IE8中使用Ajax上傳文件的問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.