js实现图片上传预览功能

<html>
    <head>
        <title>js实现图片上传预览功能</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <form action="#" name="form" method="post" enctype="multipart/form-data">
            <input type='file' name='file' id='fileid' onchange="javascript:setImagePreview('localImag','fileid','previews');">
        </form>

        <div id="localImag" class='hide'>
            <img id="previews" border="0" src="" width="41" height="41" style="display: block;">
        </div>

        <script type="text/javascript">

            $(function () {
                $('.hide').hide();
            })

           /**
            * @param string divid div框id
            * @param string inputid input框id
            * @param string imgid img标签id
            */
            function setImagePreview(divid,inputid,imgid) 
            {
                $('.hide').show();
                var docObj=document.getElementById(inputid);

                var width=$('#'+imgid).attr('width');
                var height=$('#'+imgid).attr('height');

                var imgObjPreview=document.getElementById(imgid);
                if(docObj.files &&docObj.files[0])
                {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = width;
                    imgObjPreview.style.height = height; 
                    //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(divid);
                    //必须设置初始大小
                    localImagId.style.width = width;
                    localImagId.style.height = height;
                    //图片异常的捕捉，防止用户修改后缀来伪造图片
                    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>
js实现图片上传预览功能

猜你喜欢
