Question

我正在尝试动态上传和预览图片。它适用于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...");
    }
}

Answer 1

我担心你运气不好。

IE＆lt;版本10不支持File Reader API（它也不支持File API）。

您可以在this page找到可以与IE7 / 8/9一起使用的填充物。

IE7和IE8中的图像文件上传和预览问题

1 个答案: