FileUpload控件上传图片

[newma]

我用FileUpload选择好图片后让图片立马显示在image控件上。。单击提交按钮保存到数据库中。。。。。
描述的没问题吧。。。。

[jiang_jiajia10]

这个得需要JS实现

[dengchenlu]

可以的啊
简单的么
你上传完成后就显示不就可以了

[dingjian2008]

string fileFullName = this.FileUpload1.PostedFile.FileName;
string fileName = fileFullName.Substring(fileFullName.LastIndexOf("\\") + 1);
//保存
this.FileUpload1.PostedFile.SaveAs(Server.MapPath(".") + "\\upmode" + fileName);

img1.src=Server.MapPath(".") + "\\upmode" + fileName;

[dilu1984]

如果不要求无刷新就简单了，上传后获取地址，显示即可。

[wangzhenyue]

你是显示呢 还是往数据库里面存 啊 ~！ 要是村可以写 图片路径 还可以写成 2进制流

[anlaetion]

                <table style="width: 95%; background-color: gray" title="编辑图片新闻" cellspacing="1"
                    cellpadding="1" border="0">
                    <tbody>
                        <tr style="height: 25px">
                            <td style="width: 90px; background-color: white" valign="middle" align="right">
                                标题：</td>
                            <td style="background-color: white" valign="middle" align="left">
                                <asp:TextBox ID="txtNewsTitle" runat="server" BorderStyle="Groove" Width="536px"></asp:TextBox>
                                
                                <asp:Label ID="lblCheckState" runat="server"></asp:Label></td>
                        </tr>
                        <tr style="height: 25px">
                            <td style="width: 90px; background-color: white" valign="middle" align="right">
                                来源：</td>
                            <td style="background-color: white" valign="middle" align="left">
                                <asp:TextBox ID="txtComFrom" runat="server" BorderStyle="Groove" Width="200px" Text="本站"></asp:TextBox>
                                
                            </td>
                        </tr>
                        <tr style="height: 25px">
                            <td style="width: 90px; background-color: white" valign="middle" align="right">
                                关键字：</td>
                            <td style="background-color: white" valign="middle" align="left">
                                <asp:TextBox ID="txtKeywords" runat="server" BorderStyle="Groove" Width="200px"></asp:TextBox>
                               
                            </td>
                        </tr>
                        <tr style="height: 25px">
                            <td align="right" style="width: 90px; background-color: white" valign="middle">
                                选择图片：</td>
                            <td align="left" style="background-color: white" valign="middle">
                                <input id="File1" style="width: 535px" type="file" runat="server" />
                                </td>
                        </tr>
                        <tr style="height: 25px">
                            <td align="center" valign="middle" style="background-color: white" colspan="2">
                                <asp:Panel ID="Panel1" runat="server" Height="600px" Width="100%">
                                    <div>
                                        <asp:Image ID="Image1" runat="server"/> </div>
                                </asp:Panel>
                            </td>
                        </tr>
                        <tr style="height: 25px">
                            <td align="center" colspan="2" style="height: 30px; background-color: white" valign="middle">
                                <asp:ImageButton ID="ibtnPost" OnClick="ibtnPost_Click" runat="server" ImageUrl="images/jlygda_index_01.jpg" OnClientClick="return SubNews();">
                                </asp:ImageButton>
                                   
                                <asp:ImageButton ID="ibtnCheck" runat="server" CausesValidation="false" ImageUrl="images/fbxt_index_bt.jpg" OnClick="ibtnCheck_Click" />   
                                <asp:ImageButton ID="ibnGotoList" runat="server" ImageUrl="images/fbxt_index_bt3.jpg" OnClick="ibnGotoList_Click" />
                                <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True"
                                    ShowSummary="False"></asp:ValidationSummary>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <br>
    

 /// <summary>
    /// 保存数据
    /// </summary>
    /// <returns></returns>
    private bool SaveData()
    {
        string editFlag = Convert.ToString(ViewState["EditFlag"]);
        string newsID;
        if (editFlag == "add")
            newsID = myDB.GetMaxID("T_PicNews", "NewsID").ToString();
        else
            newsID = Convert.ToString(ViewState["NewsID"]);
        GetNewsData(newsID);
        if (dstNews == null)
            return false;
        string fileName;
        string filePath = Server.MapPath("~") + "\\";
        if (editFlag == "edit" && dstNews.Tables[0].Rows.Count > 0)
        { 
            //先删除原有的文件
            fileName = Convert.ToString(dstNews.Tables[0].Rows[0]["PicFilePath"]);
            if (System.IO.File.Exists(filePath + fileName))
                System.IO.File.Delete(filePath + fileName);
        }

        if (File1.PostedFile == null)
        {
            ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "startup", "alert('请选择图片！');EndSub();", true);
            return false;
        }

        if (File1.PostedFile.FileName == "")
        {
            ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "startup", "alert('请选择图片！');EndSub();", true);
            return false;
        }
       
        string fileExt = System.IO.Path.GetExtension(File1.PostedFile.FileName);

        //首先保存图片到硬盘        
        fileName = @"BusiImg\PicNewsImg\" + newsID + DateTime.Now.ToString("yyyyMMddhhMMss") + fileExt;        
        try
        {
            File1.PostedFile.SaveAs(filePath + fileName);
        }
        catch 
        {
            return false;
        }
        //保存数据到数据库
        DataRow dr;
        if (editFlag == "add")
        {
            dr = dstNews.Tables[0].NewRow();
            dr["NewsID"] = newsID;
            dr["InfoType"] = ViewState["NewsKind"];
            dr["Status"] = 0;
            dr["ZLInfoType"] = Convert.ToInt32(ZLType);
            dstNews.Tables[0].Rows.Add(dr);
        }
        else
        {
            if (dstNews.Tables[0].Rows.Count == 0)
                return false;
            dr = dstNews.Tables[0].Rows[0];
        }

        dr["Title"] = txtNewsTitle.Text;
        dr["PicFilePath"] = fileName;
        LoginUser aUser = (LoginUser)Session["LoginUser"];
        dr["ComFrom"] = txtComFrom.Text;
        dr["Keywords"] = txtKeywords.Text;
        dr["Staff"] = aUser.StaffName;
        dr["CreateTime"] = DateTime.Now.Date;

        int ret = myDB.UpdateRS(dstNews, "T_PicNews");
        ViewState["EditFlag"] = "edit";
        ViewState["NewsID"] = dr["NewsID"];
        Image1.ImageUrl = "";
        Image1.ImageUrl = "~/" + fileName;        
        return ret >= 0;
    }

以上代码仅供参考...照搬无法能过测试

[newma]

[Quote=引用 3 楼 dingjian2008 的回复:]
string fileFullName = this.FileUpload1.PostedFile.FileName;
string fileName = fileFullName.Substring(fileFullName.LastIndexOf("\\") + 1);
//保存
this.FileUpload1.PostedFile.SaveAs(Server.MapPath(".") + "\\upmode" + fileName);

img1.src=Server.MapPath(".") + "\\upmode" + fileName;
[/Quote]

我是想选择完图片就立马在image控件里显示，怎么触发这一事件。。。这个控件好像没有这样的事件。
我用的母版页的形式，在content里面ScriptManager和UpdatePanel1，在UpdatePanel1里面放的fileUpload和image控件，，
我那javascript是放在<asp:Content></asp:content>里面还是外面，，怎么无法调用呀。。是不是放ScriptManager就不能调用啊。。。。

[wuyq11]

参考
http://www.cnblogs.com/xiongeee/archive/2008/10/22/693568.html
http://www.cnblogs.com/hunanboy/archive/2006/11/21/567612.html

[newma]

找到问题出在哪儿了。不知道是怎么回事，，，
不用母版单建一网页
<script>
function checkData()
{
var fileName=document.getElementById("myFile").value;
if(fileName=="")
return;
var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase()
//alert(exName)
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
document.getElementById("myimg").src=fileName
}
else
{
alert("请选择正确的图片文件")
document.getElementById("myFile").value=""
}
}
</script>
<form id="Form1" method="post" runat="server">
<INPUT id="myFile" type="file" onchange="checkData()" runat="server" NAME="myFile" style="width: 266px">
  <IMG id="myimg" height="125" alt="" src="" width="125"><font style="FONT-SIZE: 10pt">（图片文件不大于200K
<asp:Button id="btnSubmit" runat="server" Text="确定" Width="77px" CssClass="redButtonCss" OnClick="btnSubmit_Click"></asp:Button></td>
</tr>
</table>
</form>
这段代码没问题，若采用母版结构把这段放到内容页里就不行了。。

[newma]

这问知道出在哪儿了，，但有一句话不知道怎么写
http://topic.csdn.net/u/20081216/16/f33f7dbf-6916-499e-a24e-207883e759e8.html
问题的键接。。。

[djf_1985]

下面的JavaScript函数可以实现你选择好立马显示的功能。给上传控件加个"onchange"事件 "CheckImgCss(this, 'img');"

        
        function $(o){return document.getElementById(o);}
        function CheckImgCss(o,img)
        {           
            if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value))
            {
                alert('只能上传jpg,bmp,gif,png格式图片!');
                o.outerHTML = o.outerHTML;
            }
            else
            {
//                $(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value;
                $('Image1').src = o.value;//这里IE7已经不支持了。所以才有上面的方法。
            }
        }

[sky_lxf]

顶着.