实现FileUpload控件上传图片并且预览图片

问题遇到的现象和发生背景 ASP.Net

用代码块功能插入代码，请勿粘贴截图 protected void btn_Addbooks_Click(object sender, EventArgs e)

    {
        BookInformation books = new BookInformation();
        //上传图书图片
        string fileName = flup_books.FileName;//图片名字
        string fileFix = fileName.Substring(fileName.LastIndexOf('.') + 1).ToLower();//文件类型
        bool result = flup_books.HasFile;//是否上传文件
        if (result == true)
        {
            this.img_book.ImageUrl = "/Content/img/bookimg/" + fileName;//预览图片
            if (fileFix != "png" && fileFix != "jpg" && fileFix != "jpeg" && fileFix != "pic" && fileFix != "gif")
            {
                Response.Write("");
            }
            else
            {
                flup_books.SaveAs(Server.MapPath(".") + "/Content/img/bookimg/" + fileName);
                this.img_book.ImageUrl = "/Content/img/bookimg/" + fileName;
                books.BookImg = fileName;
            }
        }
    }

我想要达到的结果 如何实现FileUpload控件上传图片并且预览图片

你要用upload控件，那点完按钮文件就已经上传到服务器上了，所谓预览也只是拖个image过来直接链到服务器上的文件上面看
如果不满意，那你只能再去删除掉文件
想真正做到不确定不上传，你必须用js

• 这篇博客也许可以解决你的问题👉 ：文件上传-FileUpload

图像预览通常是在提交表单前实现的，如果你要是想要在按钮点击事件后再预览图像的话是多此一举了(两次回发，可以做但不推荐，简单思路就是把FileStream转换成base64 然后填充Image控件)。

而且使用js在提交表单前预览更加方便，简单示例：

            <asp:FileUpload runat="server" ID="ImageUpload"/>
            <br />
            <img id="previewContent" />

<script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#previewContent').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#ImageUpload").change(function () {
            readURL(this);
        });