Asp.Net怎么上传图片-基础教程

aspx页面

script方法内用于判断用户上传的文件是否为自己要求的格式和展示图片的方法

body内定义一个图片框用于预览用户上传的图片

一个上传文件的控件

一个提交按钮

代码如下

Script代码：

$(function () {
            $('#uploadImage').on('change', function () {
                var filePath = $(this).val() //获取到input的value，里面是文件的路径
                fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase()
                src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
                // 检查是否是图片
                if (!fileFormat.match(/.jpg|.png|.jpeg/)) {
                    alert('上传错误,文件格式必须为：png/jpg/jpeg');
                    $('#uploadImage').after($('#uploadImage').val(""));
                } else {
                    $('#cropedBigImg').attr('src', src);   //显示图片
                }
            })
        })

HTML代码：

<asp:FileUpload ID="uploadImage" runat="server" accept=".jpg,.png,.jpeg" />
        <asp:Button ID="btnUploding" runat="server" Text="上传图片" OnClick="btnUploding_Click" />
        <br />
        <asp:Image ID="cropedBigImg" runat="server" style="width:100px"/>

aspx.cs代码：

protected void btnUploding_Click(object sender, EventArgs e)
        {

            /*
             设置路径，绝对路径和相对路径的拼接
             文件夹的创建和是否存在的判断
             文件大小的判断
             判断上传后的文件夹里是否含有指定的图片
             */

            //获取网站部署的目录，绝对路径
            string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());//获取程序根目录
            //我自定义的路径名称                                                                                                      //相对路径下的位置
            string filePath = @"图片上传\";
            //为防止文件名重名，同一时间多人传同一文件，服务器出错
　　　　　　　//ddhhmmss为日期小时分钟毫秒格式，可自定义
            string dateTimeNow = DateTime.Now.ToString("ddhhmmss");
            //图片上传的文件夹
            string folderPath = tmpRootDir + filePath;
            //判断是否存在该文件夹 如果不存在
            if (Directory.Exists(folderPath) == false)
            {
                //创建文件夹
                Directory.CreateDirectory(folderPath);
            }
            //再次判断是否存在
            if (Directory.Exists(folderPath))
            {
                //存在/成功创建 文件夹
                folderPath = folderPath + @"\";
            }
            //获取图片名称
            string fileName = uploadImage.FileName;
            if (fileName == "")
            {
                ClientScript.RegisterStartupScript(GetType(), "", "<script>alert('请选择图片！！！')</script>");
                return;
            }
            else
            {
　　　　　　　　　　//将图片重命名为当前日期时间+原名防止重复，可以自定义
                fileName = dateTimeNow + fileName;
            }
            //最后拼接出整体路径
            string pathLast = folderPath + fileName;
            //限制上传文件的大小，系统默认4M
            //1Mb=1024kb=(1024*1024)b
            if (uploadImage.PostedFile.ContentLength > ((1024 * 1024) * 10))
            {
                ClientScript.RegisterStartupScript(GetType(), "", "<script>alert('文件大小超过10MB！！！')</script>");
                //结束执行
                return;
            }
            //保存到指定路径
            uploadImage.SaveAs(pathLast);
            //枚举指定路径里面，指定文件的数量，类型为long
            long ImgNum = Directory.GetFiles(folderPath, fileName, SearchOption.AllDirectories).LongLength;
            if (ImgNum >= 0)
            {
                ClientScript.RegisterStartupScript(GetType(), "", "<script>alert('上传成功！！！')</script>");
                
            }
            else
            {
                ClientScript.RegisterStartupScript(GetType(), "", "<script>alert('上传失败！！！')</script>");
                return;//不存在
            }

            //####  注意：在C#端限制所传文件大小不好用。
            //####  原因：如果文件超过了系统最大长度，C#端是限制不住的，会直接将程序崩溃。
            //####  也可以在Web.confight里面设置所传文件的大小
            //

            #region 这里是是Js限制上传文件大小
            //   < script >
            //    document.getElementById("Button1").onclick = function()
            //    {
            //                var file = document.getElementById("FileUpload1");
            //                if (file.value.length <= 0)//如果选中选中文件没有文件没有长度，就是没有选中文件
            //                {
            //                    alert("请选择所传文件");
            //                    return false;//停止操作
            //                }
            //                else
            //                {
            //                    if (file.files[0].size > ((1024 * 1024) * 10))//<strong>选中文件的第一个文件的大小</strong>大于等于10M
            //                    {
            //                        alert("文件大小不能超过10Mb");
            //                        return false;//停止操作
            //                    }
            //                }
            //            }
            //   </script > 
            #endregion
}

记得引入命名空间：

using System.IO;

到这就完成了，在aspx页面右键运行就可以看到效果，上传后的图片不会当即在VS的项目中显示出来，但是在项目文件夹中可以看到，成功点个赞！