知识学堂 > 课程 > asp.net 上传图片前预览

asp.net 上传图片前预览

发布日期:2022/11/2 来源:聚恒【返回】

 <asp:FileUpload ID="fileImg" runat="server" onchange="javascript:setImagePreview();" />
            <div id="localImag">
                <img id="preview" src="" width="150" height="180" style="display: block; 150px; height: 180px;">
            </div>
            <script>
                //下面用于图片上传预览功能
                function setImagePreview() {
                    var docObj = document.getElementById("fileImg");


                    var imgObjPreview = document.getElementById("preview");
                    if (docObj.files && docObj.files[0]) {
                        //火狐下,直接设img属性
                        imgObjPreview.style.display = 'block';
                        imgObjPreview.style.width = '150px';
                        imgObjPreview.style.height = '180px';
                        //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 = "150px";
                        localImagId.style.height = "180px";
                        //图片异常的捕捉,防止用户修改后缀来伪造图片
                        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();
                    }
                }
            </script>