ASP.NET控件上传图片

使用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)
            {
            }
        }
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值