MVC图片的上传

迷南。 2022-01-31 05:07 206阅读 0赞

开发工具与关键技术： VS ，MVC图片的上传。  
作者：刘佳明  
撰写时间：2019年 5 月 11 日  
（注：本文章所使用插件，代码均来源于老师的课件！！！！！）

学习MVC已经过了几个月了，最近总结的文章也大多是代码类型的，例如：数据的导入，导出，打印啥的，今天的文章也是属于代码类的文章，主要是关于MVC中图片的上传和保存；  
先来一波,效果图；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]

需要实现MVC中图片的上传，编辑的思路大致为：  
首先，HTML中将文件选择的按钮布置完毕，

<div class="col-12 col-lg-3 text-center">
                                <img src="" alt="" width="150" height="180" id="UsImgStudentPicture" class="border border-primary" ondblclick="showImageFile('UstudentPicture')" />
                                <input type="file" name="fileStudentImage" id="UstudentPicture" hidden accept="image/*" onchange="loadImgToEimg('UstudentPicture')" />
                                <p>双击选择图片</p>
                            </div>
      //将选择的图片显示到 img元素
            function loadImgToEimg(imageFileId) {
                //选取选择图片
                var imgfFile = $("#" + imageFileId).get(0).files[0];
                //加载image标签中
                if (!regexImageFilter.test(imgfFile.type)) {
                    //alert("选择的不是一个有效的图片文件");
                    layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
                }
                imgReader.readAsDataURL(imgfFile);
            }

控制器中定义保存的方法；  
//声明一个byte来保存新增的图片

byte[] imgFile = null;
                                if (fileStudentImage != null && fileStudentImage.ContentLength > 0)
                                {                                
                                    //初始化数组的长度，为节省空间，长度由实际上传的图片的长度决定
                                    imgFile = new byte[fileStudentImage.ContentLength];
                                    //读取该图片文件
                                    //将图片转为流结束位置
                                    //将流读取为byte[]，参数：byte[]，读取开始位置，读取字节数
                                    fileStudentImage.InputStream.Read(imgFile, 0, fileStudentImage.ContentLength);
    
                                }
                                pwStudent.UserID = userId;//用户ID
                                pwStudent.StudentPicture = imgFile;//图片
                                pwStudent.StudentState = "应届";
                                myModels.PW_Student.Add(pwStudent);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220131/4801dceb68294107bd8f3c89839543f4.png