ASP.NET--图片上传保存url到数据库

ASP.NET--图片上传保存url到数据库

开发工具：Visual Studio 2015、SQL Server 2014 Management Studio

关键技术：C# MVC
作者：刘东标
撰写时间：2019年01月25日
做个上传图片，我就想了很多老师的案例，通过李洋老师给的提示，我通过保存url路径保存到数据库，
完美解决上传图片的难题。下面是我给大家的参考代码！
实现效果：

、、、、、、、、、、、、、、、、、html代码、、、、、、、、、、、、、

    </table>
                            @*详情*@
                            <div class="modal" id="modTitles">
                                <div class="modal-dialog">
                                    <div class="modal-content" style="width:800px;margin-left:-130px;">
                                        <div class="modal-header" style="background-color: #1354a4;">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h5 class="modal-title" style="color: aliceblue;">材料认证</h5>
                                        </div>
                                        <div class="modal-body">
                                            <form id="fromClient" class="form-horizontal" role="form">
                                                <input type="hidden" name="MaxIntegral" />
                                                <input type="hidden" name="ClientID" />
                                                <div class="col-md-12 col-sm-12">
                                                    <div class="col-md-6 col-sm-6">
                                                        <label>用户:</label>
                                                        <input type="text" name="UserName" value='@Session["UserName"]' readonly class="disn" />
                                                    </div>
                                                    <div class="col-md-6 col-sm-6">
                                                        <label>类型:</label>
                                                        <select id="MaterialReviewTypeID" name="MaterialReviewTypeID" disabled class="disn"></select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 col-sm-12">
                                                    <div class="col-md-6 col-sm-6">
                                                        <label>备注:</label>
                                                        <input type="text" name="Remark" id="Remark" />
                                                    </div>
                                                    <div class="col-md-6 col-sm-6" style="margin-top:20px;">
                                                        <label>缩略图:</label>
                                                        <img alt="" width="150" height="180" id="UimgStudentPicture1" src="data: image/jpg; base64," />
                                                        <input type="file" name="fileStudentImage" style="width:72px;height:22px;border:none;margin-left:100px;" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" id="UStudentPicture1" />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-sm-4 col-sm-offset-8" style="margin-top:40px;margin-left:40%;">
                                                        <button id="SubmitClient" type="button" class="btn btn-primary">保存</button>
                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->

 //1.5查看的详情信息
        function ViewTitleInfor(MaterialReviewTypeID) {
            //清空图片框中的图片
            $("#UimgStudentPicture1").attr("src", "");
            $("#fromClient [name='Remark']").val("");
            $.ajaxSettings.async = false;
            appendOption("MaterialReviewTypeID", "SelectMaterialReviewTypeID");//材料类型
            $.getJSON("SelectMaterialReviewTypeInfo?MaterialReviewTypeID=" + MaterialReviewTypeID, function (data) {
                loadDatatoForm("fromClient", data);
            });
            //基础数据回填
            $.post("SelectClient", { UserID: UserID }, function (data) {
                var ClientID = data[0].ClientID;
                $("#fromClient [name='ClientID']").val(ClientID);
                $.post("SelectMaterialReview", { MaterialReviewTypeID: MaterialReviewTypeID, ClientID: ClientID }, function (data) {
                    $("#Remark").val(data.Remark);
                    $("#UimgStudentPicture1").attr('src', data.CheckFile);
                })
            });
            $("#modTitles").modal("show");
        }
        //选择照片：用FileReader对象来读取本地数据，并且将数据结果赋值给image的src、
        var imgReaderC = new FileReader();
        imgReaderC.onload = function (evt) {
            $("#UimgStudentPicture1").attr('src', evt.target.result);
        };
        $("#UStudentPicture1").change(function () {
            var imgfFile = $("#UStudentPicture1").prop('files')[0];
            //加载image标签中
            if (!regexImageFilter.test(imgfFile.type)) {
                //alert("选择的不是一个有效的图片文件");
                layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
            }
            //readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
            imgReaderC.readAsDataURL(imgfFile);
        });
          //详情模态框--保存
        $("#SubmitClient").click(function () {
            //获取文本数据
            var Integral = $("#fromClient [name='MaxIntegral']").val();
            var ClientID = $("#fromClient [name='ClientID']").val();
            var MaterialReviewTypeID = $("#fromClient [name='MaterialReviewTypeID']").val();
            var Remark = $("#fromClient [name='Remark']").val();
            var fileStudentImage = $('#fromClient input[name="fileStudentImage"]').prop('files')[0];
            if (MaterialReviewTypeID == "" || Remark == "" || $('#fromClient input[name="fileStudentImage"]').prop('files').length == 0) {
                layer.msg("请填写完整！")
            } else {
                var fd = new FormData();
                fd.append("Integral", Integral);//
                fd.append("ClientID", ClientID);//
                fd.append("MaterialReviewTypeID", MaterialReviewTypeID);//
                fd.append("Remark", Remark);//
                fd.append("fileStudentImage", $('#fromClient input[name="fileStudentImage"]').prop('files')[0]);//文件添加到FormData
                //FormData 对象，可以把form中所有表元素的name与value组成一个querySting，提交到后台
                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", function (event) {
                    if (event.currentTarget.responseText == "true") {
                        layer.alert("材料认证成功！", { icon: 1, title: '提示' });
                    }
                    else {
                        layer.alert("材料认证失败！已经认证了", { icon: 2, title: '提示' });
                    }
                }, false);
                xhr.addEventListener("error", function (event) {
                    layer.alert("材料认证失败！", { icon: 2, title: '提示' });
                }, false);
                //建立连接
                xhr.open("POST", "InsertMaterialReview");
                xhr.send(fd);//发送数据

            }
        });

、、、、、、、、、、、、、contraller控制器代码、、、、、、、、、

  //材料模态框--数据回填
       public ActionResult SelectMaterialReviewTypeInfo(int MaterialReviewTypeID)
        {
            var list = (from tbMaterialReviewType in myModel.B_MaterialReviewType
                        where tbMaterialReviewType.MaterialReviewTypeID == MaterialReviewTypeID
                        select tbMaterialReviewType).Single();
            return Json(list, JsonRequestBehavior.AllowGet);
        }
        //材料认证--新增
        public ActionResult InsertMaterialReview(S_MaterialReview materialReview, HttpPostedFileBase fileStudentImage)
        {
            try
            {
                var list = (from tbMaterialReviewType in myModel.B_MaterialReviewType
                            join tbMaterialReview in myModel.S_MaterialReview on tbMaterialReviewType.MaterialReviewTypeID equals tbMaterialReview.MaterialReviewTypeID
                            where tbMaterialReview.MaterialReviewTypeID == materialReview.MaterialReviewTypeID  && tbMaterialReview.ClientID ==materialReview.ClientID
                            select new{ }).Count();
                if (list>0)
                {
                    return Json(false, JsonRequestBehavior.AllowGet);
                }
                S_MaterialReview listMaterialReview = new S_MaterialReview();
                if (fileStudentImage != null && fileStudentImage.ContentLength > 0)
                {
                    //noticeCarouseImage
                    //文件类型
                    string imgExtension = Path.GetExtension(fileStudentImage.FileName);
                    //文件名称
                    string imgFileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + imgExtension;
                    if (!Directory.Exists(Server.MapPath("~/Document/MaterialReview/MaterialReviewCheckFile/")))
                    {
                        Directory.CreateDirectory(Server.MapPath("~/Document/MaterialReview/MaterialReviewCheckFile/"));
                    }
                    //保存文件的路径
                    string imgFilePath = Server.MapPath("~/Document/MaterialReview/MaterialReviewCheckFile/") + imgFileName;
                    //保存文件
                    fileStudentImage.SaveAs(imgFilePath);
                    listMaterialReview.CheckFile = "/Document/MaterialReview/MaterialReviewCheckFile/" + imgFileName;
                    listMaterialReview.Integral = materialReview.Integral;
                    listMaterialReview.Remark = materialReview.Remark;
                    listMaterialReview.ClientID = materialReview.ClientID;
                    listMaterialReview.MaterialReviewTypeID = materialReview.MaterialReviewTypeID;
                    listMaterialReview.MaterialReviewDate = DateTime.Now;
                    myModel.S_MaterialReview.Add(listMaterialReview);
                    myModel.SaveChanges();
                    
                }
                return Json(true, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                
            }
            return Json(true, JsonRequestBehavior.AllowGet);
        }
        //已经材料认证--回填
        public ActionResult SelectMaterialReview(int MaterialReviewTypeID,int ClientID)
        {
            try
            {
                var list = (from tbMaterialReview in myModel.S_MaterialReview
                            where tbMaterialReview.MaterialReviewTypeID == MaterialReviewTypeID &&  tbMaterialReview.ClientID == ClientID
                            select new {
                                tbMaterialReview.Remark,
                                tbMaterialReview.CheckFile,
                            }).Single();
                return Json(list, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {

                return Json(false, JsonRequestBehavior.AllowGet);
            }
        }