文件上传缩略图

最新推荐文章于 2022-08-18 15:39:08 发布

置顶 Smarty

最新推荐文章于 2022-08-18 15:39:08 发布

阅读量386

点赞数

文章标签： HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
        <title>文件上传缩略图</title>
    </head>
    <body>
        <input type=file name="doc" id="doc" οnchange="javascript:setImagePreview();"/>
        <p>
            <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" />
            </div>
        </p>
        <script>
            function setImagePreview() {
                var docObj = document.getElementById("doc");
                var imgObjPreview = document.getElementById("preview");
                if (docObj.files && docObj.files[0]) {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '300px';
                    imgObjPreview.style.height = '120px';
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        imgObjPreview.src = event.target.result;
                    };
                    reader.readAsDataURL(docObj.files[0]);
                } else {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag");
                    //必须设置初始大小
                    localImagId.style.width = "300px";
                    localImagId.style.height = "120px";
                    //图片异常的捕捉，防止用户修改后缀来伪造图片
                    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;
            }
        </script>
    </body>
</html>