如何达到点击浏览选择图片后，立马显示预览图片？

yangdaboke 2012-04-17 11:09:01

string bookName = TextBox2.Text.Trim();
string bookLeibie = TextBox3.Text.Trim();
string picture = FileUpload1.FileName;
string lastName = picture.Substring(picture.LastIndexOf(".") + 1);
string[] name={"bmp","jpg","gif"};
SqlConnection SqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString);
SqlCon.Open();
string SavaPath = Server.MapPath("image/")+picture;
FileUpload1.PostedFile.SaveAs(SavaPath);
string sqlStr = "Insert into T_Book_Picture(ID,图书类别,图书名,图片) values(newid(),'" + bookLeibie + "','" + bookName + "','"+ picture + "')";
SqlCommand SqlCom = new SqlCommand(sqlStr, SqlCon);
SqlCom.ExecuteNonQuery();
SqlCon.Close();
Image1.Visible = true;
Image1.ImageUrl = SavaPath;

我是先把图片设为不可见，想点击浏览后，立即可以显示图片。

...全文

520 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

anyWah 2012-04-17

打赏
举报

给你个例子 http://www.cnblogs.com/cloudgamer/archive/2009/12/22/imagepreview.html

风飘扬 2012-04-17

打赏
举报

用js，先判断给定路径下是否有图片，有则将路径赋给img src，没有不处理！

叶黑 2012-04-17

打赏
举报

JS 改变显示区域的img src就行

天下在我心 2012-04-17

打赏
举报

可以在前台用JS做，图片可以放在页面，display设置为none,点击后改变显示的image的src就行

yangdaboke 2012-04-17

打赏
举报

上面的那个是按上传的单击事件，按了上传后显示图片，也显示不了。

我现在想单击浏览后，如果选中了图片，就直接显示在 image控件中，否则不显示，供预览

lvqiuchen 2012-04-17

打赏
举报

你要兼容行么？



<html> 

    <head> 

        <title>get file input full path</title> 

    <script language='javascript'> 

        function getFullPath(obj) 

        { 

            if(obj) 

            { 

                //ie 

                if (window.navigator.userAgent.indexOf("MSIE")>=1) 

                { 

                    obj.select(); 

                    return document.selection.createRange().text; 

                } 

                //firefox 

                else if(window.navigator.userAgent.indexOf("Firefox")>=1) 

                { 

                    if(obj.files) 

                    { 

                        return obj.files.item(0).getAsDataURL(); 

                    } 

                    return obj.value; 

                } 

                return obj.value; 

            } 

        } 

    </script> 

    </head> 

    <body> 

        <input type="file" onchange="document.getElementById('img').src=getFullPath(this);" /> 

    <img id="img" height="174" width="234"/> 

    </body> 

</html>