js实现上传图片--上传前预览图片

最新推荐文章于 2020-07-20 13:46:38 发布

nyxuem

最新推荐文章于 2020-07-20 13:46:38 发布

阅读量503

点赞数

分类专栏：学习文章标签：上传预览图片

本文链接：https://blog.csdn.net/nyxuem/article/details/44985083

版权

学习专栏收录该内容

40 篇文章 0 订阅

订阅专栏

上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，真的很实用。以下代码已亲测。
已将js封装，共2共文件：ImgPreview.js和ImgPreview.html
ImgPreview.js代码：

//下面用于图片上传预览功能
//docInput:上传图片按钮的ID
//imgDmo:显示图片的标签（img）的ID
//width:显示的图片宽度
//height:显示的图片高度
function setImagePreview(docInput,imgDmo,width,height) {
    var docObj=document.getElementById(docInput); //jquery写法：$("#"docInput)
    var imgObjPreview=document.getElementById(imgDmo);//jquery写法：$("#"imgDmo)[0]
    if(docObj.files &&docObj.files[0])
    {
        //火狐下，直接设img属性
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = width+'px';
        imgObjPreview.style.height = height+'px'; 
        //imgObjPreview.src = docObj.files[0].getAsDataURL();

        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
    else
    {
        //IE下，使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = document.getElementById("localImag");
        //必须设置初始大小
        localImagId.style.width = width+'px';
        localImagId.style.height = height+'px'; 
        //图片异常的捕捉，防止用户修改后缀来伪造图片
        try{
            localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        }
        catch(e)
        {
            alert("您上传的图片格式不正确，请重新选择!");
            return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
    }
    return true;
}

ImgPreview.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>By：DragonDean</title>
<script type="text/javascript" src="ImgPreview.js"></script>
</head>

<body>
    <div id="localImag">
        <img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">
    </div>
    <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview('doc','preview',200,180);">
</body>
</html>

有兴趣的朋友可以看一下。
预览时，发现360、Opera、Google Chrome都可以，但是IE就不行，希望有大神不吝指导。

nyxuem

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现上传图片--上传前预览图片

上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，真的很实用。以下代码已亲测。
复制链接

扫一扫

专栏目录