预览本地图片(兼容IE7|IE8|Firefox)

刘杰友.互联网产品人

于 2010-06-10 16:22:00 发布

阅读量2.6k

点赞数

分类专栏：【JavaScript】文章标签： ie firefox javascript file div wrapper

本文链接：https://blog.csdn.net/llorjj999/article/details/5661688

版权

【JavaScript】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、先贴代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 预览本地图片(兼容IE7|IE8|Firefox) </TITLE>

// 新增上传域

function createPic() {
    var sample = document.getElementById("pic{picID}").innerHTML;
    var pics = document.getElementById("picRoot").children;
    var lastId = 0; // 上传域编号

    if (pics.length == 0) {
        lastId = 1;
    } else {
        lastId = document.getElementById("pic" + pics.length).id.replace("pic", "");
    }

    var id = parseInt(lastId) + 1;
    if (id > 20) {
        hiAlert("达到上传上限！");
        return false;
    }

    var temp = sample.replace(/{picID}/g, id); // 替换所有{picID}
    var div = document.createElement("div");
    div.setAttribute("id", "pic" + id);
    document.getElementById("picRoot").appendChild(div);
    div.innerHTML = temp;

return id;
}

//删除上传域

function deletePic(picid) {
document.getElementById("pic" + picid).outerHTML = "";
}

// 浏览本地文件

function onUploadImgChange(picid) {
    var sender = document.getElementById("file" + picid);
    if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
        alert('图片格式无效！');
        return false;
    }
    var objPreview = document.getElementById('img' + picid);
    var objPreviewFake = document.getElementById('preview_fake' + picid);

    if (sender.files && sender.files[0]) {
        objPreview.style.display = 'block';
        objPreview.style.width = 'auto';
        objPreview.style.height = 'auto';

        // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
        objPreview.src = sender.files[0].getAsDataURL();
    } else if (objPreviewFake.filters) {
        // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
        //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
        sender.select();
        var imgSrc = document.selection.createRange().text;

        objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

        objPreviewFake.style.width = '200px';
        objPreviewFake.style.height = '100px';
        objPreviewFake.style.marginTop = '0px';
        objPreviewFake.style.marginLeft = '0px';
        objPreview.style.display = 'none';
    }
}

// 火狐下加载图片

function onPreviewLoad(picid) {
    var imgObj = document.getElementById("img" + picid);
    imgObj.style.marginTop = '0px';
    imgObj.style.marginLeft = '0px';
}

</script>

</HEAD>