ASP.NET控件上传图片

最新推荐文章于 2025-05-26 14:03:45 发布

mrli113

最新推荐文章于 2025-05-26 14:03:45 发布

阅读量5.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Asp.Net 文章标签： asp.net 上传文件

本文链接：https://blog.youkuaiyun.com/mrli113/article/details/53219885

Asp.Net 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了两种使用ASP.NET上传图片的方法：一是通过ASP.NET控件实现；二是结合HTML标签和CSS美化界面。提供了从前端到后端的完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用asp.net控件上传图片是一种比较简单的方式，直接在后台就可以得到图片流，并对流进行上传操作。

控件上传图片

前端页面

第一种方式，使用asp控件

<asp:FileUpload runat="server" ID="image1"/> 
<asp:Button runat="server" ID="button1" Text="上传图片" onclick="button1_Click" />

第二种方式，使用html标签并加入css样式

由于file控件的样式比较难看，所以加入了a标签，来更改样式，使file控件的长度和按钮长度一样，前面的文本框只是为了显示上传的文件，和file控件的样式保持一致。

HTML部分

<input type="text" id="text1" readonly="readonly" class="text_1" />
<a href="javascript:;" class="a-upload">
   <input type="file" runat="server" id="file1" autocomplete="off" accept="image/*" onchange="fileChange(this,'text1');" style="width: 100px;"/>浏览 
</a>

javasprict

function fileChange(p,v){
    if (p != null && v != null) {
        var va = document.getElementById(v);
        va.value = p.value;
        va.focus();
    }
}

CSS样式

    <style type="text/css">
        .text_1{ width: 477px; height: 18px; line-height: 18px; border: 1px solid #ccc; padding: 5px; color: #333; font-size: 14px;vertical-align:  middle;}
        .a-upload {padding: 4px 28px;height: 20px;line-height: 20px;letter-spacing:4px;font-size:14px;position: relative;
            cursor: pointer;color: #444;background: #eee;border: 1px solid #ddd;border-radius: 4px;display: inline-block;
            text-decoration:none;display: inline;zoom: 1}
        .a-upload  input {position: absolute;font-size: 40px;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer}
        .a-upload:hover {color: #111;background: #aaa;border-color: #ccc;text-decoration: none}
    </style>

后台部分

后台部分代码在接收图片的时候，直接使用服务器控件接收即可。

        protected void button1_Click(object sender, EventArgs e)
        {
            try
            {
                HttpPostedFile file=image1.PostedFile;//对应前端file控件的id
                if (file != null && file.ContentLength > 0)
                {
                    string fileName = file.FileName;
                    string fileSize = file.ContentLength.ToString();
                    string fileType = file.ContentType;
                    string fileExtension = Path.GetExtension(fileName);
                    if (fileExtension == null || fileExtension.Trim() == "")
                    {
                        fileExtension = "";
                    }
                    else
                    {
                        if (fileExtension.IndexOf('.') == -1)
                        {
                            fileExtension = "." + fileExtension;
                        }
                    }
                    string filePath = "/image1"+"/"+Guid.NewGuid().ToString()+fileExtension;
                    Stream stream = file.InputStream;//文件流
                    //FileUploadClass upload = new FileUploadClass();//上传类，自己写就可以
                    //upload.UploadFile(stream, filePath);//上传文件
                    stream.Close();
                }
            }
            catch (Exception ee)
            {
            }
        }