C# MVC 上传图片 实现效果(全)

前言

亲爱的朋友们，我又过来了。虽然我知道我这几天出现的可能比较频繁，但是我只能说，年龄上去了 ，记忆力不行了 总要把一些重要的事情记录下来啊。好了 话不多说，我们看需求。

需求

之前做了一个项目，最近安排测试的时候发现了一些用户体验不好的问题，就是图片路径 只有路径没有上传的地方。可能是由于我之前参考的网站并没有这个功能，因此我就没有处理（手动笑哭）。结果项目负责人找到了我，说这个体验不好，谁知道图片路径在什么位置呢（手动笑哭）。然后又告诉我之前的图片上传的位置在哪里（此操作藏得及其隐蔽）。我一脸懵逼，行吧 给我个把小时 我把功能补上。由于时间问题，所以只做了比较基础的 上传至服务器存储，上传至阿里云OSS存储 由于之前写好了上传的帮助类 直接调用 开心~~
下面展示的是比较基础的存储服务器处理 贴代码~（手动机智）

前端代码展示

 <!--H5-->
 <!--非常基础的配置，你放在什么位置都是可以的-->
 //之后为了入库的处理存储位置   主要是上传成功后更新图片路径
 <input id="imgTitleUrl" name="imgTitleUrl" type="text" class="form-control " />
 <input id="image" name="image" type="file" />
 <a href="javascript:;" onclick="SaveImg()" style="background-color: blue;" class="label">上传服务器</a>

 <!--脚本实现-->

    /**
     * 上传图片  单个
     **/
    function SaveImg() {
        // js 获取文件对象
        var fileObj = document.getElementById("image").files[0]; 
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
            alert("请选择图片信息！");
            return;
        }
        var formFile = new FormData();
        formFile.append("action", "img");
        formFile.append("file", fileObj); //加入文件对象
        var data = formFile;
        $.ajax({
            url: "/Upload/SaveImg",//负责处理的接口
            data: data,
            type: "Post",
            dataType: "json",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (result) {
            /**
            result格式：
            {
            	"state":"success/error",
            	"url":"图片服务器路径"，
            	"msg":"接口返回提示信息(成功/失败)"，
            	"code":"错误编码，自定义"
            }
            **/
                if (result.state == "success") {
                    $("#imgTitleUrl").val(result.url);
                    alert(result.msg);
                } else {
                    alert(result.msg);
                }
            },
        })
    }

后端接口处理

        /// <summary>
        /// 本地上传图片信息至服务器处理
        /// </summary>
        /// <returns></returns>
        [HttpPost] 
        public ActionResult SaveImg()
        {
            Hashtable ht = new Hashtable();
            string imgurl = "";
            foreach (string key in Request.Files)
            {
                //这里只测试上传第一张图片file[0]
                HttpPostedFileBase file0 = Request.Files[key];
                //转换成byte,读取图片MIME类型
                Stream stream;
                int size = file0.ContentLength / 1024; //文件大小KB
                if (size > 1024)
                {
                    ht.Add("state", "error");
                    ht.Add("msg", "图片不能超过1M！");
                    ht.Add("code", "-2");
                    ht.Add("url", "");
                    return Json(ht);
                }
                byte[] fileByte = new byte[2];//contentLength，这里我们只读取文件长度的前两位用于判断就好了，这样速度比较快，剩下的也用不到。
                stream = file0.InputStream;
                stream.Read(fileByte, 0, 2);//contentLength，还是取前两位
                //获取图片宽和高
                //System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
                //int width = image.Width;
                //int height = image.Height;
                string fileFlag = "";
                if (fileByte != null && fileByte.Length > 0)//图片数据是否为空
                {
                    fileFlag = fileByte[0].ToString() + fileByte[1].ToString();
                }
                string[] fileTypeStr = { "255216", "7173", "6677", "13780" };//对应的图片格式jpg,gif,bmp,png
                if (fileTypeStr.Contains(fileFlag))
                {
                    string action = Request["action"];
                    //存储路径    一般情况下都是uploads文件夹
                    string path = "/uploads/"+DateTime.Now.Year+"/"+ DateTime.Now.Month+"/";
                    //文件名称     我用的时间+名称处理  一般会增加一个随机数
                    string fileName = DateTime.Now.Millisecond+Request.Files[key].FileName  ;
                    string fullpath = path;
                    //校验文件夹是否存在  不存在进行创建
                    if (!Directory.Exists(Server.MapPath(fullpath)))
                    {
                        Directory.CreateDirectory(Server.MapPath(fullpath));
                    }
                    //文件保存信息
                    Request.Files[key].SaveAs(Server.MapPath(fullpath)+ fileName);
                    //最后输出存储的图片路径信息
                    imgurl = fullpath + fileName; 
                }
                else
                {
                    ht.Add("state","error");
                    ht.Add("msg", "图片格式不正确！");
                    ht.Add("code","-1");
                    ht.Add("url", "");
                    return Json(ht);
                }
                stream.Close();
            }
            ht.Clear();
            ht.Add("state", "success");
            ht.Add("url", imgurl);
            ht.Add("msg", "上传成功！");
            ht.Add("code", "0");
            return Json(ht); 
        }
        

尾语

我接口处理的时候 为了省事 直接用Json输出了 这样看起来比较方便，
虽然接口处理是可以进行多个图片的处理的 但是我目前没有应用， 所以就没有处理imgurl了 处理起来也比较快先判断是否为空即可 用，(英文)隔开就行
好了这次分享就到这里吧，有问题可以评论，留言哦~~
就算是咱没接触过的 咱也可以为了你们去学习，找资料 之后发布出来呢
来个漂亮的结语吧，
心之所向，吾即前往。程序之路，任重道远。