asp.net中FileUpload选择文件后image显示预览

不打扰是莪最后的温柔 提交于 2020-02-21 22:25:32

js部分

   <script type="text/javascript">
        //下面用于图片上传预览功能
        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 = '350px';
                imgObjPreview.style.height = '300px';
                //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 = "350px";
                localImagId.style.height = "300px";
                //图片异常的捕捉,防止用户修改后缀来伪造图片
                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>

html部分

/*这里绑定的ImageUrl可以在页面加载时显示固定的图*/
<asp:Image ID="preview" runat="server" class="img-thumbnail img1" ImageUrl="/img/a1.png" />
         
<asp:FileUpload ID="fileImg" runat="server" onchange="javascript:setImagePreview();" />

cs部分

/* 上传后图片会不存在  可以在按钮事件中在次进行绑定  或者在js中绑定*/
preview.ImageUrl = filename;
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!